NN6 float issues

for some reason my floats dont work in NN6

[visualbasicide]

I have a semi complicated layout going on here, I will try psuedo to explain whats happening here.

I broke my divs into 5 sections
top nav, banner, content, breadcrumb and footer
now I have more divs inside these, for example, my top nav has two divs, floated left is the actual navigation, floated right is a search.

the banner is the same way, floated left, newsflash is floated right. (each of the 5 sections is a wrapper for the elements on the same horizontal level)

so it goes something like this with the divs:
wrapper

topnav
topmenu
search
/topnav

bannerwrapper
banner
search
/bannerwrapper

content_wrapper etc..

breadcrumb_wrapper
footer

/wrapper

all of the containing divs are floated left, I tried clearing on both sides, no dice. the footer jumps up above the content wrapper, breadcrumb is presumably hidden behind it.

doesnt matter where in my layout I put it, inside the content_wrapper, inside its own (one for breadcrumbs and fotter) or even outside the main wrapper

each of them are width 100% to fluid layout.
everything else on the page works great and each "section" has the same layout info as the one before it, to get it to align the way I want, so main wrappers are 100%, elements inside are specifiec %'s, just the bottom two are giving me grief in NN6 only and I dont know how to make them behave. here is the relevant css (i hope)

div.bottom_wrapper {
background-color:#FFCC33;
width:100%;
float:left;
clear:both;
}

div.bottom_leftfiller {
background-color:#33FFCC;
width:20%;
float:left;
clear:left;
}

div.bottom_breadcrumb {
background-color:#FF9900;
width:50%;
float:left;
clear:right;
}

div.footer_wrapper {
background-color:#666666;
width:100%;
float:left;
clear:both;
}

div.footer_filler {
background-color:#66FF00;
width:20%;
float:left;
clear:left;
}

div.footer_content {
background-color:#003366;
width:50%;
float:left;
clear:right;
}

and the divs for those sections:

<div class="bottom_wrapper">
<div class="bottom_leftfiller">Left Filler</div>
<div class="bottom_breadcrumb">Breadcrumbs Nav</div>
</div>

<div class="footer_wrapper">
<div class="footer_filler">Footer Filler</div>
<div class="footer_content">&copy; 2007 My Ficticious Company, Inc.</div>
</div>

the "fillers" are just defined widths to keep layout correct.
those are also contained in the Main "wrapper" for the site, which is 100% of the page.

if this isnt clear enough or more information is needed, please let me know.

Thanks in advance.

[Robin_reala]

Welcome to WebmasterWorld visualbasicide!

While I don't have a specific answer at the moment due to time constraints, can I ask why you're still supporting NN6? We get precisely 0 hits on all of our fairly well trafficked sites, so not only is it an old and buggy browser but it's an old, buggy and unused browser.

[edited by: Robin_reala at 4:13 pm (utc) on Aug. 1, 2007]

[Fotiman]

Yeah, the only reason I opened this thread was to post a reply that said "Who the heck still uses NN6?". :)

My advice would be to not worry about NN6. Here's a listing of some browser stats to give you an idea of what you should be supporting (NN6 was never even on this list... went right from NS5 to NS7).
[w3schools.com...]

[SuzyUK]

Hi and Welcome visualbasicide,
answer, if you still want to support it

NN6 was always buggy when it comes to clearance, the solution used to be that you had to use a clearing div with some inline content in it e.g. <div style="clear: both;">&nbsp;</div>, but this then lead to hacks for "whitespace" in other browsers.

However, I fired up the old NN (haven't done that in years!) and discovered that the "new" method of containing/clearing floats, using overflow: auto; works in NN6!

so what I would do if you want this to work is to remove the float declaration from the wrapper divs (I presume it's there to contain child floats?) and instead leave them at 100% width (for IE) and then put overflow: auto; on them.

then you should no longer need to use clear at all, keeping NN6 happy and the widths should work OK x-browser. Now I haven't tested this in all past/present browsers, but I like it because it has less things to go wrong..

here's the code that works with your HTML (in my quick test anyway) - excuse the replacement hyphens for underscores, that was the first thing I tried as some older browsers have problems with underscores in class/ID names - you will need to change HTML to hyphens too or put CSS back to underscores

div.bottom-wrapper {
background-color:#FFCC33;
width:100%;
overflow: auto; /* to clear and also contain floated children */
}

div.bottom-leftfiller {
background-color:#33FFCC;
width:20%;
float:left;
}

div.bottom-breadcrumb {
background-color:#FF9900;
width:50%;
float:left;
}

div.footer-wrapper {
background-color:#666666;
width:100%;
overflow: auto; /* to clear and also contain floated children */
}

div.footer-filler {
background-color:#66FF00;
width:20%;
float:left;
}

div.footer-content {
background-color:#003366;
color: #ffffff;
width:50%;
float:left;
}

[visualbasicide]

sweet. havent kept up with the trendy lately, didnt know NN6 totally dropped of the map, this will make this alot easier. thanks for the tip on NN6 though, I'll file that away with other usless information ive accumulated, like asp/php tricks, and my birthday, auto premium, etc..

Thanks for the response =)