Problem with aligning divs

Question

I have 3 divs each of 250 width and 125 height. How can I align them next to each other so that they work on most of the browsers?

Answer 1

If they've all got an identical height, just using float: left on them should do the trick, provided their surrounding box is wide enough to hold them all.

Answer 2

This solves your problem

<div style='float:left; width:250px; height:125px;'>First</div>
<div style='float:left; width:250px; height:125px;'>Second</div>
<div style='float:left; width:250px; height:125px;'>Third</div>

This is optional

<div style='display:inline-block'>
    <div style='float:left; width:250px;'>First</div>
    <div style='float:left; width:250px;'>Second</div>
    <div style='float:left; width:250px;'>Third</div>
</div>

The above makes sure that any content that comes under the main div is below all three of the inner div.

Test them out put some content in both the different style and you will see what i mean. Remove the height value from the first to get a better explanation