Dynamic Div Height?

[neridaj]

Hi,

I know this question has been posted before but I can't seem to get this to work. I have a content div containing an image and a right floated table. I want the table to dictate the height of the content div instead of the image but I can't get it to work. If you can please share.

Thanks,

J

/*begin code*/


/*\*/
* html .minwidth, * html .container, * html .content, * html .layout {
height:1px;
}
/**/

* html .minwidth {
padding-left:800px; /* CHANGED MARGIN TO PADDING */
}

* html .container {
margin-left:-800px;
position:relative; /* ADDED */
}

.width {
width:90%;
min-width:800px; /* CHANGED TO REMOVE BACKGROUND COLOR */
border:3px solid green;
margin:10px auto;
}

.container
{
border: 3px solid red;
}

#top
{
width: auto;
height: auto;
border: 3px solid blue;
}

#topnavcontainer
{
height: 98px;
padding: 5px;
border: 3px solid orange;
}

ul
{
padding: 0;
margin: 0;
list-style: none;
}

li
{
float: left;
position: relative;
padding-right: 5em;
font: 12px arial, verdana, lucida, sans-serif;
}

a#nosub:link
{
color: #9EAEBB;
text-decoration: none;
padding-right: 2em;
background: transparent url("images/square_off.jpg") right center no-repeat;
}

a#nosub:visited
{
color: #9EAEBB;
}

a#nosub:hover
{
color: #49677F;
text-decoration: none;
background: transparent url("images/square_on.jpg") right center no-repeat;
}

a#nosub:active
{
color: #9EAEBB;
}

li
{
color: #9EAEBB;
}

li ul
{
display: none;
position: absolute;
top: 1em;
left: 0;
}

li > ul
{
top: auto;
left: auto;
}

li:hover ul, li.over ul
{
display: block;
}
//subnav style
#nav li li{ margin: 0 0 .2em 0; }

#nav li li a
{
display: block;
color: #49677F;
background-color: #9EAEBB;
width: 5em;
padding: .2em .8em;
text-decoration: none;
}

#nav li li a:hover
{
background-color: #49677F;
color: #FFF;
text-decoration: none;
}

#sub li a
{
background-image: none;
}


#content
{
border: 3px solid black;
margin: 0px;
width: auto;
height: auto;
}

#thumbs
{
border: 3px solid red;
width: 202px;
float: right;
}

#thumblarge
{
border: 3px solid blue;
margin: 0px;
width: 520px;
padding: 0px;
}

#bottom
{
clear: both;
margin: 0;
border: 3px solid blue;
}


/*end code*/

[Kravvitz]

CSS without the X/HTML it goes with is not very useful.

Why are you using a table?

I suggest you read up on clearing and containing floats (http://www.dynamicsitesolutions.com/css/layout-techniques/#clearing_floats). Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach is best.