Height problem i can not fix.

[tonynoriega]

IE 6 seems to work fine strangely enough... but IE7 and FF do not...

here is what i got...

html, body {
border:0;
margin:0;
padding:0;
background: #ffffff url(../images/bg.jpg) repeat-x;
height: 100%;
}

#body_wrap{
background-color:#45679e;
margin: 0 auto;
height: 100%;
border: 1px solid #45679e;
}

#left_col{
background-color: #45679e;
float:left;
height: 100%;
margin: 0 auto;
width: 199px;
}
#right_col{
background: #ffffff;
float:left;
height: 100%;
margin: 0 auto;
width:548px;
}

but nor the left_col or right_col are expanding down to fit all of my content...

the text just keeps going past the border of the wrap...

Again, IE6 works fine..

any insight?

do i need to position anything?

[tonynoriega]

Ok, i fixed it for IE7 by adding:

html, body {
border:0;
margin:0;
padding:0;
background: #ffffff url(../images/bg.jpg) repeat-x;
height: 100%;
height: auto; /* i added height: auto; */
}

and the left_col and right_col and body_wrap all extend down to fit the content..

but not FF...

what is FF's deal?

[Xapti]

because the way you're using height:100% means 100% of the browser window's height. The div will only be the height of the window... if your content is higher than that, it overflows.

I assume you want functionality to be: have the minimum height of the divs to be 100% of the browser window, but if it's more, accomodate to that.
There are plenty of layouts around to get what you desire. It's not quite as simple as this though. Check around on the forums (sorry I don't have links handy)

If you are satisfied with what I consider the simplest method, faux columns, then you won't need to go look around. All faux columns does is use a background image to simulate the div continuing on. The downside to faux columns is that they are not variable width. Considering that your divs are set to fixed pixel widths, that should not be a problem.

[swa66]

To avoid problems it is much easier to start with developing in FF. Get it right there (and in safari/opeara etc.), at the very end add what IE7 and IE6 need in addition to what the standards want to fix the bugs in IE usign conditional comments.

Starting with IE is a whole lot harder as you'll assume the bugs in IE are "normal" and you'll have a much harder time finding "fixes" for something that's not broken to start with ...

[bluesmandeluxe]

You are not "clearing" your floats.

This is one of the biggest issues people have when using floats.

There are three techniques to clearing floats properly. I use the most stable, called the "clearfix" self-clearing technique.

It uses the :after pseudo-element to force an invisible period after the float. This forces the floated element to auto clear.
Add a float:left to your #body_wrap ID.
Then add the following in your css beneath #body_wrap:

#body_wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #body_wrap {height:1%}

/* the above is a fix for IE6 HasLayout" issue - setting a height: 1% forces the container to expand around its contents (even floated elements). If the height of the container's contents exceeds 1% (which it almost always will)*/

* :first-child + html #body_wrap {min-height:1px}

/* the above is a fix for IE7 HasLayout" issue - Setting a min-height on a container in IE7 also expands a container in the same fashion that adding a height in IE6 does. That strange selector that precedes #body_wrap (*:first-child+html) is the piece that targets IE7 and IE7 only. */

I know, it seems like a lot just to do a simple (clear:both). But it is the only way to perform cross-browser float clearing without adding any blank markup or tags, forcing scrollbars to appear (the "overflow:auto" technique), or adding floats to all of your id or class elements (the "add a float to clear a float technique")

The whole code to clear is:

#body_wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #body_wrap {height:1%}
* :first-child + html #body_wrap {min-height:1px}

As the page grows, you can easily add other items that need to be cleared, like if you add a #footer select - simply addit to the autoclear elementlike so:

#body_wrap:after, #footer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

[swa66]

I'm rather against the use of hacks (such a * html and *:first-child+html ... ), they can shoot you in the foot big time in the long run. Please use conditional comments instead.

As for adding content: using :after to add content and make it hidden is still adding content (be it not in the html itself).

I think the long term solution is to have a future version of CSS have more flexibility in how the box behaves if there's floated childern inside (either in the child or the parent). But considering IE doesn't do it right already (e.g. broken box model), and their user populations isn't upgrading (to e.g. IE7), and MSFT bluntly refuses to fix bugs in IE, there's little hope it will make any difference in the near future.