|
|
Posted by JWL on 05/18/07 16:30
Edwin van der Vaart wrote:
> 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.
Thanks for answering. But even with clear: both; on #content, the
#navbar div appears to collapse. You can see what I mean here:
http://www.sarroukhs.f2s.com/index.html
The #navbar div has a bright red background but the colour isn't visible
unless I put a height on #navbar.
Navigation:
[Reply to this message]
|