CSS layout question

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.:

Re: CSS layout question

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.:
>
>

Re: CSS layout question

JWL wrote:

> 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

--
-bts
-Motorcycles defy gravity; cars just suck

Re: CSS layout question

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.:
>>
>>

Re: CSS layout question

> JWL wrote:
> news: 5b62l0F2rmsfcU1@mid.individual.net
[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



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

Re: CSS layout question

On 2007-05-18, JWL wrote:
[...]
>> 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.

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.

Re: CSS layout question

In article ,
Ben C wrote:

> 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

s, at the very least be rid of the

s in that menu div, it
just takes up space.

--
dorayme

Re: CSS layout question

dorayme wrote:
> In article ,
> Ben C wrote:
>
>> 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.

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
>

s, at the very least be rid of the

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;...

Re: CSS layout question

JWL wrote:
>
> 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.

--
Berg

Re: CSS layout question

JWL wrote:
> 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.:
>>>
>>>

instead of a paragraph


like this:








• |


• |












• normal text |


• large text








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.

Re: CSS layout question

> JWL wrote:
> news: 5b7jijF2pj4i2U1@mid.individual.net
> 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:



--
BootNic Saturday, May 19, 2007 9:14 AM

"I fought the Dharma, and the Dharma won."
*Allen Ginsberg*