Hi, I've been working on implementing a design a made for a website which up until now has gone pretty smooth. However, I'm currently running into the following problem. I have a container DIV which contains 2 DIVs, one is floated left, one is floated right. The problem that arises is that the container DIV does not grow in height with the content of the two floated DIVs. Usually I'd go about solving this using overflow:hidden on the container DIV. However, this time around that is not the solution. A lot of the content on the page just disappears (which is basically what overflow:hidden was meant to do). Does anyone have any idea how to stretch the container DIV to the correct height without losing a part of the content? I'm fairly sure that the solution that I have in place should be doing the trick, but I get the idea I'm missing something here. You can take a look at the demo on: http://development.fujimtbmasters.com/wp/ Thanks in advance! PS. Both CSS and HTML validate W3C wise.
You can try adding a clear:both; after the 2 div's, but within the container. So it would look like this: <container> <div1></div1> <div2></div2> <div style="clear:both;"> </container>
I've done that on the elements that don't explicitly need it. As you can see the content DIVs actual size still doesn't reach all the way to the bottom of it's containing items. Inside of both floating DIVs are some elements that need the overflow:hidden to work correctly (e.g. the jQuery sliding lists). I did not remove it from them, because that would screw up the layout even more. http://development.fujimtbmasters.com/wp/
I don't quite understand what you mean by this and what you are trying to achieve. From my perspective, everything looks fine. Please re-iterate what exactly you are trying to do.
If you look at it now, you can see that I've given the #content DIV a margin-bottom of 20px. I added this because I want to create room for a footer that will go there. However, the margin-bottom is nowhere to be seen in the page design. My guess (and tools such as the IE Development Toolbar, that visually highlight where elements are on the page, confirm this) is that the #content DIV does not grow in height depending on its content. Therefore the margin-bottom might be there, but since the #content element stops halfway on the page, it is not showing up correctly. If it's still unclear, please tell me and I'll see if I can whip up some screenshots.
Remove any height:100px; you have applied to the div's within the #content DIV. That is causing your problem.
You are officially my hero. I have absolutely no idea why those declarations were there though. Guess it was done in some sort of sleep deprived state. Thanks!