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..

    php css how to change name color based on membership?

    how to set equal font size in table cells for mobile device html pages

    How to prevent outside CSS from overriding web component styles

    How can I remove comments on-fly from my static CSS files?

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    How to hide the third nested list in this css dropdown nested lists?

    How to make text disappear when HTML5 Video has finished loading?

    how to make dropdown using html and css?

    How not to use body style css rule in part of html code?

    CSS - 5 fluid columns with 6 fixed separators, how to get them to equal 100% of containing div?

    How to feature detect for CSS custom properties? [duplicate]

    How can i fit my webPage in browser when user makes browser window big?

    How to optimize CSS file for speed

    How to add padding to a ul/li menu with a background image?

    How do I use a different image for each JQuery UI Slider handle

    How to make the page layout stay the same after minimized?

    How can I place a checkbox within a button? [closed]

    facebook and css, how to place a like comment dialog on top of a video?

    How to style an add to cart

    How do I align a dropdown menu below a
    ?

    How to make an element stretch to the same height as its container?

    How to center part of a navbar

    How to centre a table in html using css file? [duplicate]

    How to override style of single RichFaces component

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How to adjust height based on content css

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    CSS: How to add borders of different colors to input radio buttons labels?

    Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?