I have a min-height declaration on my main body container along with a height of auto for Firefox. The CSS looks like:

/* BODY */
.body_container {
    background-color:#060607;
    margin:0 auto 0 auto;
    width:766px;
    min-height:400px;
    height:auto;
    border-width: 1px 1px 1px 1px;
    border-style: none solid solid solid;
    border-color:#6A0600;
    padding:15px 15px 15px 15px;
}

I know that IE doesn't recognize min-height, so I am using this code to make it work:

/* for Internet Explorer */
/*\*/
* html .body_container {
height: 400px;
}
/**/

That's all working fine and dandy. However, in Firefox the div is not expanding past the 400px to accommodate the content inside of it. It is in IE 6 & 7 though.

What am I missing?

The URL in question is:
http://itsnetservices.com/qst/

Thanks in advance.
-Adam

So from reading other posts on here, I have found its more than likely another having to clear my floats issue.

Now I am wondering, is there any harm is just clearing every float I make just make sure I don't always have this problem and constantly have to figure out which div to clear?

And if its not a problem, can I just user clear:both on every float?

Thanks,
-Adam

For the moment, I just made the height 490px to make everything fit. So if you click on my link and say to yourself, "Hey, he fixed it!", no I did not.

But I still would like to know what I can do to fix the problem the right way.

Thanks,
-Adam

And if its not a problem, can I just user clear:both on every float?

That won't work. Putting clear:both ON the floated element is the wrong way to do it and usually won't work.

The clearing element has to follow the floated elements so if you have a container that contains 2 floated divs, you would need to put in the clearing element AFTER the closing </div> for the last floated element.

Putting clear:both on your body-container is ineffective. On your layout, you would want the clearing here:

</div>
<!-- END RIGHT CONTAINER -->
clearing element here

I don't understand the need for height:auto, I don't see that it's necessary since the height will be 'auto' and stretch to accommodate the content anyway - provided it is coded properly.

For reference on float layouts: http://css-discuss.incutio.com/?page=FloatLayouts
Clearing floats: http://css-discuss.incutio.com/?page=ClearingSpace

Oh, and using that IE HACK that way is the wrong way to do it, IE7 will choke on it, big time. Use conditional comments to target IE6's bugs.

Have I told you lately that I love you? Hehe.

You are good!

I made the switch from tables to CSS layouts early last year, and I'm still figuring out certain things. Floats and especially clears are a small hurdle to understand. I have been reading up as much as I can about the matter, and so far I get the most knowledge here.

So just to be straight, when I need to add a clear, it should be the last element inside the container that has the nested elements inside of it? Part of my problem was I thought I needed to add it to the div that was the longest, but that doesn't even make sense.

I use http://browsershots.org/ to check my designs in multiple browsers and multiple operating systems. I'm sure you know about it, but that link might help others I hope.

In regards to the IE hack, I found that on some website, and copied it directly. I do believe you when you say that IE7 might have a problem with it. But at the moment it works on my laptop's IE7 install, and over at browser shots, it also seems to work. You can see here: http://browsershots.org/http://itsnetservices.com/qst

Thank you again LadynRed, you saved my butt once again.

Thanks,
-Adam