Two colour column with dynamic CSS nav bar problem

two column css

[shaun]

Hi,

I really have looked nearly everywhere for an answer to this.

I am trying to creat a two column page using CSS. Everything works fine, then I add a a dynamic nav menu (CSS unordered list based but javascript for pop-up submenus to one level) in the left hand column (which is green). When I resize the font, the nav menu expands horizontaly but not the actual column. Resulting page is thus:

NNNNNNNNN CCCCCCCCCCCCCCCCCCCCCCCCCCCC
NNNNNNNNN CCCCCCCCCCCCCCCCCCCCCCCCCCCC
NNNNNNNNN CCCCCCCCCCCCCCCCCCCCCCCCCCCC
NNNNNNNNN CCCCCCCCCCCCCCCCCCCCCCCCCCCC
GGGG CCCCCCCCCCCCCCCCCCCCCCCCCCCC
GGGG CCCCCCCCCCCCCCCCCCCCCCCCCCCC
GGGG CCCCCCCCCCCCCCCCCCCCCCCCCCCC
GGGG CCCCCCCCCCCCCCCCCCCCCCCCCCCC
GGGG CCCCCCCCCCCCCCCCCCCCCCCCCCCC
GGGG CCCCCCCCCCCCCCCCCCCCCCCCCCCC

N=Nav Menu text, G=Greem left column, C=Content

How can I avoid this? I really want the left hand column to expand with the nav menu which is contained within it.

The end goal is to have a two column site which allows the user to resize without upsetting the look (it has to be level 2 accesibiliy compliant).

Any help would be great

Thanks, Shaun.

[mipapage]

Is 'N' inside 'G'?

Ideally, you would want them both to reside in the same container (for example, in the same div), and have that container grow and shrink based on, in this case, font-size.

Wow, I missed the
Welcome to WebmasterWorld!

[edited by: mipapage at 6:04 pm (utc) on April 27, 2004]

[Bonusbana]

Hi shaun and welcome.

I think I know what you mean, please post some of your relevant html and css. This will make it much easier to help you out. Please also include your menu javascript (if its not 200 lines!).

[shaun]

N is inside G and N and G are both DIVs. In fact, N expands but G doesn't so I will try your suggestion of putting N and G into the one container.

Here is the CSS for the G. C and N containers:

#navpanel { /* G Container */
width: 150px;
float: left;
margin-left: -1px;
padding: 10px;
background-color: #336666;
height: 100%;
}

div#navbar { /* N container */
width: 11em;
height: auto;
position: relative;
left: .2em;
top: 0em;
text-align: left;
}

#content { /* C container */
padding: 10px;
margin-left: 170px;
border-left: 1px solid #006;
}

I would provide the Java Script but its quite large so here is the URL:
<snip>

Thanks for both of your replies, I'll let you know how I get on with using the same container.

Cheers, Shaun.

[edited by: DrDoc at 3:54 pm (utc) on April 28, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]

[DrDoc]

Remove the width declaration for the #navpanel. It should automatically expand to match the width of the #navbar.

[shaun]

Hi and thanks for the advice. I managed to resolve the problem, and many more besides. It really came down to not fully understanding what I was doing - which is often the case when you're trying to get something done in a short time period. Anyway, I have solved pretty much all my CSS problems and learnt a lot at the same time. Its fascinating stuff - now I need to conditionaly switch the style sheet depending on whether the user is left-handed or right-handed, I imagine a simple javascript solution will resolve that though I do wish CSS had conditional statements and '$' variables.

After that i'll be starting on the braille version...PHEW!

Anyway, thanks and good intro to this forum.

Cheers, Shaun.