center three divs side by side

css, html

Solution

Try it without `float` and with `text-align:center;` on the `#wrapper`. Since your blocks are `display:inline-block;`, they'll center the same way text does.

Note that nto make it responsive, I swapped all your widths to `%` instead of `px` and removed some extra `margin` spacing. I've also added `vertical-align:top;` so the divs aline along the top.

#wrapper{
    text-align:center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.aboutleft,
.aboutright{
    display: inline-block;
    vertical-align:top;
    width: 48%;
}
.vline{
    background: rgb(186,177,152);
    display: inline-block;
    vertical-align:top;
    min-height: 250px;
    margin: 0;
    width: 1px;
}

http://jsfiddle.net/daCrosby/Ce3Uz/2/

Problem

I have three divs that I want to center side by side on a page. I also have some content such as `<p>` and `<h3>` tags in them HTML (example) ``` <div id = "wrapper"> <div class = "aboutleft"> <h1> About us </h1> <h3> small description </h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio nec A few sentences about you go here </p> </div> <div class = "vline"></div> <div class = "aboutright"> <h1> About the shop/Clients </h1> <h3> small description </h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio ne A few sentences about you go here </p> </div> </div> ``` CSS ``` .aboutleft { display:inline-block; float:left; width: 450px; } #wrapper { text-align:center; width: 80%; margin: 0, auto; } .aboutright { display: inline-block; float:right; width: 450px; } .vline { background: rgb(186,177,152); display: inline-block; float: left; min-height: 250px; margin: 0 30px; width: 1px; } ``` The result of this is just the 3 divs all floating mostly to the left. I want to center all three of them on the page.

Original source