Get a div to watch something float

[samanime]

Hello,

http://www.aggis-topography.com/azureronin

Basically, I have a <div> and then have floating <divs> inside. One of those floating <div>s I want to have a variable size, and I want the div that contains it to grow accordingly. However, since the div is floating, it won't.

How can I correct this situation?

Here is a quick view of the core pieces of this code:

<div id="main">
 <div id="header"></div>
 <div id="menu" class="float_left"></div>
 <div id="content_area" class="float_right">
  <div id="inner_content_area" class="float_left">
   <div id="content"></div>
   <div id="footer"></div>
  </div>
  <div id="ronin" class="float_right"></div>
</div>

Basically content is the one that grows and I want main to grow accordingly.

The core of this question is basically "can I make something floating affect the size of it's parent"?

I know I could redo my CSS to use positioning elements instead of making it float, which I may have to do.

Thanks.

[Tyssen]

That's a bad idea - it means the overall size of your layout could change from page to page dependent on the contents and there'll be no consistency.

[samanime]

That was meant to be the point. There would be a min-height set to allow to be the smallest, but then it would grown vertically in order to display more content.

Is that considered a "bad design" now a days in favor of having just the content div scroll?

[Tyssen]

Sorry, I think I misunderstood you. I thought you were talking about the width of the container changing based on the width of the float, but you're actually talking about your container not containing the floats. What you need to do is clear your floats.

[samanime]

Ah, thank you.

[samanime]

Hmmm, I still have a problem.

If I use overflow: hidden, it just hacks off the extra (of course).
If I use overflow: auto, it gives the main section a scroll bar (as expected). But I want the scrollbar to be the typical scrollbar, not one in the middle of the page.

As for display: table and display: table-cell, they seem to have no effect, except for expanding it about 10 pixels.

It is most obvious on this page: http://www.aggis-topography.com/azureronin/p/products

Am I missing something?

[samanime]

I solved my problem. The problem was I was under a minor misconception. I knew that non-floating parents wouldn't wrap floating children, but it seems that floating parents also won't wrap non-floating children. I need to add "display:table" to both main and inner_content_area.

Thanks.

[Kravvitz]

No. It's because you set a height on #inner_content_area when you really wanted a min-height. Adding display:table had the same affect.

I recommend that you read these:
Internet Explorer and the Expanding Box Problem
Min-Height for IE/Win
The overflow declaration

Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach is best for containing floated elements. The page Tyssen linked to demonstrated it, but left out the part needed for IE5.0/Win.

Here's the complete version:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility:hidden;
}
.clearfix {display: inline-block;}

/* Hide from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display:block;}
/* End hide */

[Tyssen]

I also wouldn't recommend using display: table as a float containment technique because I've seen it cause other unwanted problems in Firefox.

[Kravvitz]

Yeah, if I remember correctly, it can cause problems in at least some versions of Safari sometimes too.

P.S. Hello Tyssen.

[samanime]

Thanks for the help.

Although, after going through all this it looks like we'll be switching back to our original plan to go with a content box that keeps it's size and just have overflow scroll within it.