Jabir Al Fatah Jabir Al Fatah - 5 months ago 7
CSS Question

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;

}

Answer

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