How to place 3 different paragraphs next to each other?

Question

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;

    }

Did you try using CSS `float: left;`? – Kolja Oct 23 '14 at 23:19 — Kolja, Oct 23 '14 at 23:19

GSaunders · Accepted Answer · 2014-10-23T23:26:23.537

4

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;
}

edited Oct 23 '14 at 23:26

answered Oct 23 '14 at 23:21

GSaunders

548
1
5
15

Tried it, but not appropriately fixed. please look how does it look here: https://plus.google.com/u/0/100402704740320621129/posts/WgPaG3aPD7y?pid=6073547951971687586&oid=100402704740320621129 – Jabir Al Fatah Oct 23 '14 at 23:52

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

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;

edited May 23 '17 at 11:58

Community

1
1

answered Oct 23 '14 at 23:21

Jacob G

13,762
3
47
67

Imagine Studios, it doesn't fix the problem completely. look at the picture here: https://plus.google.com/u/0/100402704740320621129/posts/WgPaG3aPD7y?pid=6073547951971687586&oid=100402704740320621129 The second and third paragraph are a little bit belower than the others. – Jabir Al Fatah Oct 23 '14 at 23:51

score 0 · Answer 3 · answered Oct 25 '17 at 07:12

0

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/

answered Oct 25 '17 at 07:12

Srishti Sinha

618
1
11
23

How to place 3 different paragraphs next to each other?

3 Answers3

JSFiddle