Posted by JWL on 05/18/07 13:33

Hi

I'm new to CSS layout techniques and have a question.

Suppose I have a navbar and want to split it into two columns so I can
put links on the left and some accessibility controls on the right:

+--------------------------------------------------------------+
| home | about us | contact us large text | normal text |
+--------------------------------------------------------------+

In my attempt, I start off with a #navbar div and then nest two divs
inside #navbar, floating one left and the other right, e.g.:

<div id="navbar">
<div id="left">...</div>
<div id="right">...</div>
</div>

#left {
float: left;
padding-left: 20px;
}
#right {
float: right;
padding-right: 20px;
}

My question is, if I then follow this with:

+--------------------------------------------------------------+
| home | about us | contact us large text | normal text |
+--------------------------------------------------------------+
| content | #sidemenu |
| | |
| | |
| | |
+--------------------------------------------------------------+

i.e., two more divs, one floated left (#content) and the other floated
right (#sidemenu), #navbar appears to collapse so if I have a background
image or colour on it, it disappears. The only way I know how to fix
this is add an explicit height to #navbar, but I'd prefer to avoid
setting heights if possible.

I guess what I'm really asking is, what is a good, simple, cross-browser
way to basically do this in CSS:

<tr>
<td align="left">...</td><td align="right">...</td>
</tr>

Thanks for your help

[Back to original message]