Daniel Allen Langdon Daniel Allen Langdon - 16 days ago 5
CSS Question

How to center two divs floating next to one another

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

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