Posted by Edwin van der Vaart on 05/18/07 14:02

JWL wrote:
> 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.
Use "clear: both;" for #content. That way the content will be floating
to the left and the #sidemenu to the right. The menu and the normal text
stay on their place.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de and software-help1.org to duplicate this post.

[Back to original message]