Div height not expanding to fit dynamic content

HTML & CSS
1

Hi everyone. I’m pulling my hair out to fix a floating div problem. I’ve done hours upon hours of searching and trying out different solutions but I’m unable to get any of them to work.

I have a simple 2 column layout, floating divs side-by-side within a container. The right column (#white-box) will have dynamically loaded content in it. I need #white-box to expand to fit this content (#main-content)… but it’s not.

I’d like to post a link to show you the problem, but the forum won’t let me because of spam? Sorry.

Here is my code:



<div id="container">
   <div id="sidebar">  {module_menu}  </div>
   <div id="white-box">
        <div class="bl">
        <div class="br">
        <div class="tl">
        <div class="tr">
        <div id="main-content">
        {tag_pagecontent}
        </div>
        <div style="clear: both;"></div>
        </div>
        </div>
        </div>
        </div>
   </div>
<div style="clear: both;"></div>
</div>

And here are my styles:



#container {
position:relative;
text-align: left;
margin: 0px;
width: 770px;
z-index:10;
}


#sidebar {
position:relative;
margin: 0;
padding: 36px 10px 0px 10px;
width: 150px;
height: 594px;
float:left;
}


#white-box {
position:relative;
z-index:25;
float:right;
width:600px;
}

#main-content {
position:relative;
text-align:left;
margin: 8px 16px 16px 16px;
}

.bl {background: url(corner-bl.gif) 0 100% no-repeat #ffffff; width: 600px;}
.br {background: url(corner-br.gif) 100% 100% no-repeat}
.tl {background: url(corner-tl.gif) 0 0 no-repeat}
.tr {background: url(corner-tr.gif) 100% 0 no-repeat; padding:10px}


.clear {font-size: 1px; height: 1px}


.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */

As you can see, I’ve got code for the “clearfix” solution, but I tried it in multiple places and it didn’t seem to work either.

Do you know what I am missing?

THANK YOU!

2

Hi, unless you have a fixed height, it should automatically expand to fit the content, unless of course the content is floats, then the parent needs the clerafix, or overflow:hidden; set on it (you could also float hte parent, but then THAT parent would need overflow set or clearfix)

It would be much easier to see this online thus we can have images :).

3

I tried to post a link, but it says I have to have 5 posts before it will let me. Maybe I can post 4 more posts in a row? I’ll try that…

4

Empty post.

5

Blank post. (Sorry, I’m just trying to get my post count to 5 so I can post a link)

6

Okay, here is the link:

http://cookiesite.goodbarry.com/_product_61871/Onesie

I want the rounded white box (#white-box) to expand to the height of its child div (#main-content).

I have tried clearfix on the container and on the white-box, but none seem to work.

7

Hi, on “.shop-product-large” you attempted to add “clear” as a class, though you need “clearfix”

Either add the “fix” at the end, or add overflow:hidden;, I recommend clearfix.

8

Hi Ryan,

Thank you. I changed it to clearfix, and while it did add a white background behind the product image, it didn’t affect #white-box (the box with the rounded corners). It appears I’m heading in the right direction, but I need #white-box to expand to fit that content.

Are you able to see what I am doing wrong?

Thank you very much for your help.

9

I got it!! I just found every place that I put “clear” and changed it to “clearfix.”

Such a silly mistake. Thank you for pointing it out.

However, it is now doing something weird in IE. (I’m looking at IE7)

The white box is expanding, but now, the products have disappeared. Could this be an overflow hidden problem??

10

Sorry but I’m not seeing anything weird :).
I looked at the link you provided but nothing weird happened.

11

Ha. Sorry about that. I posted too hastily in my excitement. :slight_smile: I found a few more clear/clearfix issues, and once I fixed those, everything looked fine in IE.

Thank you again for your help. I can’t believe I wasted so much time when it was so easy to fix!

Much appreciated.

12

Ah I’m glad :). Your welcome.