Stop Div from stacking improperly in CSS

Question

I have used a CSS layout grid system (960.gs) It is a liquid system, and for some reason the header-right and content right divs are not staying on the same line to the right. Does anyone know why this would be? Thanks

Answer 1

Huh?

Perhaps you need to set explicit widths for your DIVs, if I guess correctly.

Give them either a float or a position in CSS, then force their width (also in CSS).

<div id='one' style='float:left;width:20%'>One</div>
<div id='two' style='float:left;width:80%'>Two</div>

<div id='three' style='float:left;width:20%'>Three</div>
<div id='four' style='float:left;width:80%'>Four</div>

<div id='five' style='float:left;width:20%'>Five</div>
<div id='six' style='float:left;width:80%'>Six</div>

etc.

UPDATED:

If the problem is to the right, then it's a similar solution. It looks as though the borders, padding, or margin is throwing off the widths. To use my example above...

<div id='five' style='float:right;width:20%'>Five</div>
<div id='six' style='float:right;width:80%;margin:5px'>Six</div>

Div Six will now appear on a different line since the 5px margin pushes it beyond 100%.