Div height not expanding to table height?

HTML & CSS
1

Hey guys, I’m having a hard time figuring out how to get the height of my wrapper div to have at least the same height as any content in it. For instance, when I have a “tall table”, the table protrudes past the bottom of the wrapper div (or the wrapper does not lengthen itself to match the height of the table). I have the table within it’s own DIV. If it’s out of the DIV, then the wrapper div does extend to include all of the table.

So obviously I need to add something to the div that surrounds the table, but I can’t figure it out. Any help appreciated out after hours of working with height, min-height, overflow, etc… to no avail.

Here is my Test page.

Thanks!

PS: It looks fine in IE7, but obviously I want it to be coded correctly so that it looks right in Firefox.

2

Can you post the HTML and CSS for hte div and table only? I can’t get to the site from my school. Have you set a height on the div? Is the content just cutting off or is there scrollbars appearing.

3

Here’s a pic of what it looks like. The wrapper has a repeating image which is the white with bars on each side…that’s the part I want to extend down behind the table.

Here’s the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>

<head>

<title>Test page</title>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
<meta http-equiv=“Content-Style-Type” content=“text/css” />

<style type=“text/css”>

html, body {
height: 100%;
}

body.main {
width: 788px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
border: 0px;
font-family: Helvetica,Tahoma,sans-serif;
font-size: 12px;
background: #d2d2d2 url(Images/gradientbg.jpg);
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}

#wrapper {
width: 800px;
background: url(Images/dropshadow.gif) top center repeat-y;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
border: 0px;
height: auto !important;
min-height: 300px;
height: 100%;
}

#contents {
width: 788px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: auto !important;
height: 100%;
}

</style>

</head>

<body class=main>

<div id=“wrapper”>

<div id=“contents”>

<div style=“float: left;”>

<table bgcolor=“#cccccc” width=“300”>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
<tr><td align=“center”>Tall table inside a DIV</td></tr>
</table>

</div>

</div>

</div>

</body>

</html>

4

It’s because the div that contains the table is floated so it is collapsing the entire divs height to the min-height:300px; you set. Adding overflow:hidden; will make it contain the floats. IE gets this wrong…Just add overflow:hidden; to the #wrapper.

5

Thank you…it works! Your explanation makes sense…very much appreciated!

6

Your welcome :). If you have any more questions just ask.