CSS layout question

[JWL]

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

 

[Edwin van der Vaart]

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.

 

[Beauregard T. Shagnasty]

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 |
+--------------------------------------------------------------+

Further, you do not need to have text-size choosers, if you design the
page/site correctly by not using pixel-sized fonts. See:

http://k75s.home.att.net/fontsize.html

 

[JWL]

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.

 

[BootNic]

news: (e-mail address removed) [snip]
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.

Add overflow:hidden; to #navbar may produce the desired effect
you are looking for.

A conditional comment for IE<7

<!--[if lt IE 7]>
<style type="text/css">
#navbar {
display:inline-block;
}
</style>
<![endif]-->

--
BootNic Friday, May 18, 2007 5:43 PM

All my humor is based upon destruction and despair. If the whole
world was tranquil, without disease and violence, I'd be standing on
the breadline right in back of J. Edgar Hoover.
*Lenny Bruce US comedian, satirist, author*

 

[Ben C]

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.

It's because floats don't contribute to the height of their container.
There's nothing else in #navbar except floats, so it gets zero height.

As BootNic suggested, make it overflow: hidden. Not because you want to
change the overflow behaviour, but for the sideeffect that this makes
#navbar a "block formatting context root" which means that it does
include floats in its height calculation after all.

 

[dorayme]

As BootNic suggested, make it overflow: hidden. Not because you want to
change the overflow behaviour, but for the sideeffect that this makes
#navbar a "block formatting context root" which means that it does
include floats in its height calculation after all.

I learnt something today. Interesting, thank you gentlemen.

btw, OP should really adjust that design, be rid of the pixel
fixed widths, not bother about text size buttons (brwsers alrady
have facilities, you have to give up teaching people how to use
their browsers at some point, the earlier the better).

There is trouble with the menu, just see by clicking up the text
a few notches, looks not pretty. Use an inline list, rather than
<p>s, at the very least be rid of the <p>s in that menu div, it
just takes up space.

 

[JWL]

I learnt something today. Interesting, thank you gentlemen.

Me too. Thanks all.

btw, OP should really adjust that design, be rid of the pixel
fixed widths, not bother about text size buttons (brwsers alrady
have facilities, you have to give up teaching people how to use
their browsers at some point, the earlier the better).
>
There is trouble with the menu, just see by clicking up the text
a few notches, looks not pretty. Use an inline list, rather than
<p>s, at the very least be rid of the <p>s in that menu div, it
just takes up space.

That page was just an example I knocked togther to demonstrate the problem.

Does anyone know how to get this to work in IE5? There's no red
background, even with display:inline-block;...

 

[Bergamot]

links on the left and some accessibility controls on the right:

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

Hmmm... I bet my "normal" text size is larger than your idea of "large"
text.

Those controls are actually an impediment to accessibility, rather than
an aid. The user's browser is quite capable of setting suitable normal
text size for the individual. If you leave body/paragraph text at the
default size (100%), then there should be no reason why the user would
need to adjust it in the first place.

 

[Edwin van der Vaart]

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.

Already mentioned to use an unorder-list <ul> instead of a paragraph <p>
like this:
<div id="navbar">
<div id="left">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About us</a> |</li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="right">
<ul>
<li>normal text |</li>
<li>large text</li>
</ul>
</div>
</div>

In the style sheet:
#navbar {
background-color: #F00;
overflow: hidden;}
#left, #right {Background: #0066ff;
#left {float: left;}
#right {float: right;}

#left ul, #right ul {
margin: 0em;
padding: 1em;
list-style: none;}
#left ul li, #right ul li {display: inline;}

I suggest to use percentage instead of a fix width for the #content and
#sidebar.
--
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, velocityreviews, umailcampaign.com,
gthelp.com, webfrustration.com, excip.com and many other to duplicate
this post.

 

[BootNic]

news: (e-mail address removed)
dorayme wrote: [snip]

Does anyone know how to get this to work in IE5? There's no red
background, even with display:inline-block;...

change the contional comment to:

<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:0;
overflow:visible;
}
</style>
<![endif]-->