How to place 3 different paragraphs next to each other?


Tags: html,css

Problem :

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;

    }


Solution :

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

    CSS Howto..

    How do I display a randomly generated list in columns with CSS?

    How to add a css class into my function

    How to style html element directly (inline)?

    How to make separating lines/borders in a table disappear with CSS?

    How can I track down a:hover jquery source?

    How to vertically center text overlapping an image?

    how to apply the style using css3 [duplicate]

    How to make elements appear under a
      in Firefox & IE8?

    How to conditionally render CSS and JavaScript inside head element of an HTML

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How to make .less files to have .css syntax highlight in Vim?

    jQuery hide show id

    How to change font-size of multiple elements using jQuery

    How to make a div 100% width minus a certain amount?

    How to create horizontal funnel like this? [closed]

    How to continue CSS list on new page?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How to apply Hovering on html area tag?

    how to take common factors out from css where it is separated by comma (,) [duplicate]

    How to display results comming from database in 3 columns using php/mysql/html/css

    How to apply a class in the current slide using bxslider?

    How to select a certain element in CSS by numerical position

    How to hover a Fixed element until it reaches some point

    How do I get my textboxes to align properly once triggered? - jQuery/CSS

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    Showing required fields by bolding

    How to keep a sticky menu contained inside a floating sidebar?

    How do I override a css value?

    How to I create two containers with different backgrounds? [duplicate]

    how to swap div with one another in mobile view css