IE7 container of floated elements not expanding, clear and zoom not working

Question

Edited; see bottom of post

I have a layout that works perfectly in everything except Internet Explorer 7.

I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.

Here's what it looks like: http://tinypic.com/r/ea3vpy/8

It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.

I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.

Here's the relevant CSS:

#content {
    width: 669px;
    height: 100%;
    padding: 20px;
    padding-top: 0;
    position: relative;
    display: table-cell;
    vertical-align: top;
    background-color: #F7F8F7;
    text-align: left;
}

#content { /* To make it play nice with the sidebar */
    _width: 709px;
    *display: inline;
    *position: absolute;
    *left: 0;
    *zoom: 1;
}

p#indexwelcome {
    max-width: 330px;
    min-height: 440px;
    float: left;
}

#dogimg {
    width: 323px;
    max-width: 100%;
    height: 246px;
    margin-left: 10px;
        float: right;
}

#loginbox {
    max-width: 323px;
    margin: 20px 0;
    padding: 10px;
    position: relative;
    float: right;
}

#itemsbox { /* the one with the bananas */
    width: 644px;
    height: 142px;
    margin-top: 20px;
    position: relative;
    clear: both;
}

And the HTML:

<div id="content">
<h1>Heading</h1>

<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />

<div id="loginbox">
    <p>Login box stuff</p>
</div> <!-- loginbox div -->

<div id="itemsbox">
    <!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->

EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.

However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).

Here's the page CSS:

#page {
    width: 1025px;
    height: 100%;
    min-height: 650px;
    margin: 15px auto;
    padding: 10px 0;
    position: relative;
    background-color: #7B9F73;
    *min-height: 990px;
}

IE7 container of floated elements not expanding, clear and zoom not working

0 Answers0