CODEWITHSUNDEEP
htmlcss
Jabir Al Fatah
Jabir Al Fatah

Reputation: 31

How to place 3 different paragraphs next to each other?

In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.

This is how I was trying to do, but I failed to figure it out.

<footer>
        <div id="footer_box">

                        <p id="footer_text_left">
                        should sit at the left.
                        </p>

                        <p id="footer_text_middle">
                        should sit in the middle.
                        </p>
                    <p id="footer_text_right">
                        should sit at the right.

                        </p>

        </div>

                        </footer>

.CSS:

#footer_box{
    border-top:2px solid #009933;
    padding-bottom:75px;
    background-color:#3366CC;
    }
    #footer_text_left{
    font-size:15px;
    color:black;
    font-family:Euphemia;


    }
    #footer_text_middle{
    font-size:15px;
    color:black;
    font-family:Euphemia;

    }

    #footer_text_right{

    font-size:15px;
    font-family:Euphemia;
    color:black;

    }

Upvotes: 2

Views: 28520

Answers (3)

Srishti Sinha
Srishti Sinha

Reputation: 618

Just capture the paragraph into a div and add style. For example

<div style="float: left; margin-right: 20px">

Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/

Upvotes: 0

Jacob G
Jacob G

Reputation: 14172

This is Extremely easy to do, either by making the <p>'s inline-block, or float:left them:

#footer_box p{
    display:inline-block;
}

inline-block, (or inline) is the best way to do it, as float:left, has some unwanted effects, such as the <p>'s no longer effect the height of their parent, as can be seen in this JSFiddle, compare it with the one below.

JSFiddle

See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Upvotes: 1

GSaunders
GSaunders

Reputation: 548

First option:

p {
  float: left;
}

Second option:

p {
  float: left;
  width: 30%;
  margin: 0 1%;
}

Third option (best):

p {
 display: inline-block;
}

Another thing I saw was that every paragraph had the same rules, you could set the font properties on the body or global paragraph so you won't need to set it on everything.

That would look like this:

body {
   font-size:15px;
   font-family:Euphemia;
   color:black;
}

Or if you want it just on the footer paragraphs:

footer p {
    font-size:15px;
    font-family:Euphemia;
    color:black;
}

Upvotes: 4

Related Questions