html - 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?

question from:https://stackoverflow.com/questions/5357310/how-to-center-two-divs-floating-next-to-one-another

Answer 1

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