How to center two divs floating next to one another

Question

I have written the following HTML trying to center two div's next to each other.

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

However, the code I've written results in the two div's floating all the way to the left. What this does do correctly is float the two div's side by side.

What do I need to change to center the two div's side by side?

Answer 1

Instead of using float: left, use display: inline-block:

<div id='wrapper' style='text-align: center;'>     <div style='display: inline-block; vertical-align: top;'>         Lorem ipsum<br />         dolor sit amet,<br />         consectetur adipisicing elit     </div>     <div style='display: inline-block; vertical-align: top;'>         Lorem ipsum<br />         dolor sit amet     </div> </div> 

The top of each inner div is kept aligned by using vertical-align: top.

Example: http://jsfiddle.net/hCV8f/1/

Answer 2

You will have to automatically set the margin and probably a specific width to your wrapper div

<div id="wrapper"></div> 

In your CSS:

#wrapper {     width: 70%;     margin: 0 auto; } 

Answer 3

Try this:

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;background-color:red;width:50%'>
        Lorem ipsum<br />dolor sit amet
    </div>
    <div style='float:right;background-color:blue;width:50%'>
         Lorem ipsum<br />dolor sit amet
    </div>
</div>

http://jsfiddle.net/JDAyt/