Float: left problems while using DIVs?

Question

I have problems aligning the 2 Divs side by side like 2 columns in a table? Sometimes they align correctly but sometimes the Div on the right appears below the left Div, if I refresh the page the div returns to its original place.

How can I configure them so that the divs ALWAYS appear side by side?

Thanks

Answer 1

Read about the box model

Typically you will have problems because of padding inside your div altering the width. If a div gets too wide to fit in the space it will sit below the others.

For instance, if you have two divs with widths set to 200px.

If you set the padding to be 5px in one of them, the actual width will be 210px (depending on the browser).

But it could be a number of reasons.

Answer 2

It would be better to accept this behaviour since you can't control the size of the screen that your visitors will be using- this allows your layout to degrade gracefully for devices such as mobile phones etc.

Answer 3

the problem is in width, When 2 divs with floating left meets to narrow parent, then by CSS spec rightmost put bellow.

Answer 4

I recommend you to read this two great articles at alistapart.com

CSS Swag: Multi-Column Lists

Faux Absolute Positioning

They are really helpfull to understand the 'float' property.

Answer 5

If the divs are too wide to fit on one line, they won't. So if you use pixel values and the screen isn't wide enough, it won't work. BUT if you use relative widths, like 47% for each other them, you can be sure that they will always be the right size to fit next to each other as they will shrink when the window does. Now they might look a little weird if they're both 20 px wide, but this will assure they are always next to each other. :D

Answer 6

The important thing when making floating divs is to set the "float" and "width" attributes.

<div style="float:left;width:100px">Left Div</div>
<div style="float:left;width:100px">Middle Div</div>
<div style="float:left;width:100px">Right Div</div>
<div style="clear:both;">Bottom Div</div>

Would generate:

==============================================
|  Left Div   |  Middle Div   |  Right Div   |
|             |               |              |
|             |               |              |
|             |               |              |
|             |               |              |
==============================================
|                 Bottom Div                 |
==============================================

If you resize your browser to a smaller window, the divs will wrap. This is the default behavior.