Can't get a DIV to extend with a floated DIV inside it (Firefox issue).

[wyrd33]

I've been searching and reading like crazy and have yet to figure out what I'm doing wrong. I've read several layout articles but none have the layout I'm looking for, so it's hard to determine what I need to change. If someone could lend me a hand I'd appreciate it.

Okay I have 3 DIVs.

main
sidebar
content

main has a background color, sidebar and content have float: left;, and it's laid out like so:


<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>


However, in Firefox, main does not extend to the length of either sidebar or content. It's basically treating main as if there's nothing inside it, and treating sidebar and content as if it were overlapping main.

This isn't the case in IE, as main extends to the length of either sidebar or content (whichever is longer) and shows the background color that I have laid out for it.

As a side note (afterthought), is there a way to make sidebar extend to the length of main, whatever it may be? I've tried height: 100%; but that doesn't work correctly in Firefox (haven't tested it in IE), and basically only gives it the height of the browser window. Basically the sidebar has a background different from Main and I'd like it to show for the length of the page.

Thanks for your time.

[VIPStephan]

Floated elements are taken out of the natural flow as it occurs in the HTML code, so actually Firefox is doing the correct thing and collapsing the element containing the floated element(s).
The solution is simple: Add an empty <div> to clear the float like this:


<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
<div class="clear"></div>
</div>

and apply clear: left; to this last div in your CSS. Now the container box (#main) will stretch as far down as the #content is long (or #sidebar, respectively - whatever is longer).

P.S.: You can make the #sidebar extend to the length of #content (if this is longer) to equal the height of #main if you're nesting the #content into the #sidebar. You'd have to apply a different background color to #content, though (or background-color: transparent; maybe - haven't done this so far...).

[orcrist]

yes, lol, it was hard for me to grasp too, but float does actually means get me outta here. and ff does that right.

inconvenient as it may seam now, remebmer that, it may be very usefull for some other problems ;)

http://css.maxdesign.com.au/floatutorial/index.htm

http://bonrouge.com/br.php?page=floats

[wyrd33]

Ahh okay that makes sense. I knew float was taking it out of context and "floating" it above main, because I messed around with a few other position options. Floating just happen to get me the layout I wanted (without content wrapping around sidebar), so I was looking for a solution which involved it.

Now my only problem is having sidebar extend the length of main. I'll make some adjustments based on what was suggested above and report back.

[wyrd33]

Awesome, thanks again guys. By changing my thinking (based on the suggestions), to get the sidebar to extend with the length of main, all I did was this:

- Changed the bg of main to the bg of what I wanted my sidebar to be.
- changed the bg of content to the bg of what I wanted the main to look like.

It was that simple!

The solutions are there, I just had to approach it differently. I'm still in "table mode" if you can understand that. This designing without tables is new, and definitely a whole new beast.

[VIPStephan]

Good job, man! :)

Actually you're right. Your way of doing it was much simpler than my thoughts. :D Sometimes we just some input from outside to find our own solution. ;)

[wyrd33]

Well it appears I didn't total fix it. Regardless of how I do it; changing the colors of the backgrounds around, putting content inside sidebar, I'm still going to have length issues.

I'm assuming there's no direct way to tell a div to extend to the length of it's parent?

For now I just made a simple background and put it into main with exactly what I wanted. That way it makes both the sidebar and content look like they extend to the bottom regardless of actual length, even though they really don't.

[NickPresta]

<div id="foo">
<div id="bar">
</div>
<div id="hax">
</div>
</div>


Then,


div#foo { height: xxx; min-height: xxx; }
div#bar { float: left; width: xxx; }
div#hax { clear: left; min-height: xxx; height: xxx; }


Should work.

[wyrd33]

Is it the combination of height and min-height that makes this work? I've tried using min-height before, but Firefox didn't seem to accept it while IE did. But at the same time I don't remember specifying a height either, just a min-height.

[NickPresta]

min-height is treated like height in IE. You use min-height for IE. Height will work in Firefox.

[wyrd33]

min-height is treated like height in IE. You use min-height for IE. Height will work in Firefox.

Ah okay I see. Well the problem is getting it to work in Firefox then. I've tried height: 100%; and min-height: 100%; but unfortunately Firefox only treats 100% as the browser window (e.g. you scroll down and the background ends), and doesn't seem to recognize min-height at all.

Instead of continuing to fuss with this I think I'll go ahead and stick with the background I threw into main. It may not be as flexible, but at least the web site looks exactly how I want it to.