create dynamic height on content area, any ideas?

[Geekpulp]

Hi everyone, I'm new to CSS and I'm having an issue with the height of my content area not expanding to fill the content I put in it.

I can fix this by simply defining a height for the #content but that's a very limiting solution. Any idea as to how I would fix this problem?

Thanks for your help in advance :)

Here's my CSS:

/* Generic Selectors */
body {
margin: 0px auto;
padding: 0px;
background-color: #D2D8E8;
font-family: "trebuchet ms", helvetica, sans-serif;
font-size: 0.8em;
line-height: 2em;
text-align: center;
color: #5C5C66;
}
p {
margin: 0px; auto;
padding: 0em;
}
a {
color: #E60000;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
h1 {
margin: 0em;
padding: 0em 0em 0.5em 0em;
font-size: 1.1em;
color: #003399;
}
h2 {
margin: 0em;
padding: 0em 0em 0.5em 0em;
font-size: 0.9em;
color: #003399;
}
/************************* Classes *************************/
.wrap {
width: 780px;
margin: 0px auto;
padding: 0px;
text-align: left;
}
.contentrightbox {
width: 200px;
height: auto;
margin: 0px;
padding: 16px;
background-image: url(images/boxTop.gif);
background-position: top left;
background-repeat: no-repeat;
}
.contentrightboxbottom {
width: 200px;
height: 6px;
margin: 0px;
padding: 0px;
background-image: url(images/boxBottom.gif);
background-position: top left;
background-repeat: no-repeat;
}
/************************* ID's *************************/
#background {
width: 796px;
margin: 0px auto;
padding: 0px;
background-image: url(images/background.gif);
background-repeat: repeat-y;
text-align: center;
}
#navigation {
height: 24px;
margin: 0px auto;
padding: 0px;
}
#navigation ul {
float: right;
margin: 0px auto;
padding: 0px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
display: inline;
margin: 0px auto;
padding: 0px;
}
#navigation a {
float: left;
display: block;
width: 100px;
height: 24px;
margin: 0px auto;
padding: 0px;
background-image: url(images/line.gif);
background-position: top left;
background-repeat: repeat-y;
color: #003399;
text-decoration: none;
}
#navigation a:hover {
background-color: #003399;
color: #FFFFFF;
text-decoration: none;
}
#navigation a div {
margin: 0px 8px;
height: 24px;
}
#header {
height: 72px;
margin: 0px auto;
padding: 0px;
background-image: url(images/line.gif);
background-position: bottom right;
background-repeat: repeat-x;
text-align: left;
}
#header img {
margin: 6px 0px 0px 24px;
}
#feature {
width: 780px;
height: 256;
margin: 0px auto;
padding: 0px;
}
#banner {
height: 240px;
position: absolute;
margin: 16px 16px 0px 16px; 
}
#news {
position: absolute;
background-color: #D1D7E7;
margin: 16px 16px 0px 467px; 
width: 296;
height: 240;
font-size: 0.9em;
}
#newsleft {
position: absolute;
background-color: #D1D7E7;
width: 132px;
height: 224px;
margin: 16px 16px 0px 16px;
}
#newsleft p {
margin: 0px 16px 0px 16px;
}
#newsright {
position: absolute;
background-color: #D1D7E7;
width: 132px;
height: 224px;
margin: 16px 16px 0px 148px;
background-image: url(images/line.gif);
background-position: top left;
background-repeat: repeat-y;
}
#newsright p {
margin: 0px 16px 0px 16px;
}
#newsticker {
height: 32px;
margin: 0px auto;
padding: 0px;
font-size: 0.9em;
text-align: center;
background-image: url(images/line.gif);
background-position: bottom right;
background-repeat: repeat-x;
}
#content {
width: 780px;
height: 400px;
margin: 0px auto;
padding: 0px;
font-size: 0.9em;
}
#contentleft {
position: absolute;
width: 200px;
margin: 32px 0px 32px 32px;
}
#contentcenter {
position: absolute;
width: 284px;
margin: 32px 16px 32px 248px;
}
#contentright {
position: absolute;
width: 200px;
margin: 32px 32px 32px 548px;
}
#footer {
height: auto;
clear: left;
margin: 0px;
padding: 0px;
background-image: url(images/line.gif);
background-position: left top;
background-repeat: repeat-x;
text-align: center;
}
#footer p {
padding: 1em;
font-size: 0.9em;
}
#bottomOfPage {
height: 64px;
margin: 0px;
padding: 0px;
background-image: url(images/bottom.gif);
background-position: center top;
background-repeat: no-repeat;
}

Here's my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Homepage Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="homestyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background">
<div class="wrap">
<!--top menu-->
<div id="navigation">
<ul>
<li><a href="#"><div>menu item 1</div></a></li>
<li><a href="#"><div>menu item 2</div></a></li>
<li><a href="#"><div>menu item 3</div></a></li>
<li><a href="#"><div>menu item 4</div></a></li>
<li><a href="#"><div>menu item 5</div></a></li>
</ul>
</div>
<!--header with topdesk logo-->
<div id="header">
<img src="images/logo.gif" alt="TOPdesk-logo" id="TOPdesk">
</div>
<!--Feature Area-->
<div id="feature">
<div id="banner">
<img src="images/banner_large.jpg" alt="banner">
</div>
<div id="news">
<div id="newsleft">
<img src="images/banner_small_1.jpg" alt="truck">
<p>Some text news 1...Some text news 1...</p>
</div>
<div id="newsright">
<img src="images/banner_small_2.jpg" alt="paper plane">
<p>Some text news 2...Some text news 2...</p>
</div>
</div>
</div>
<!--News roll-->
<div id="newsticker">
<a href="#">news ticker info goes here...</a>
</div>
<!--Main Content Area-->
<div id="content">
<!--left content col-->
<div id="contentleft">
<h1>h1 heading</h1>
left content area left content area left content area left content area left content area left content area left content area left content area left content area left content area left content area left content area.
<h1>h1 heading</h1>
left content area left content area left content area left content area left content area left content area left content area left content area left content area left content area left content area left content area.
</div>
<!--center content col-->
<div id="contentcenter">
<h1>h1 heading</h1>
center content area center content area center content area center content area center content area center content area center content area center content area center content area center content area center content area center content area
<h1>h1 heading</h1>
<ul>
<li>item 1</li>
<li>item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2</li>
<li>item 3 item 3 item 3 item 3 item 3 item 3 item 3 item 3 item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<!--right content col-->
<div id="contentright">
<!--quick link content box-->
<div class="contentrightbox">
<h1>h1 heading</h1>
<a href="#">item 1</a><br/>
<a href="#">item 2</a>
</div>
<div class="contentrightboxbottom">
</div>
<div>
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
</div>
</div>
<!--page footer-->
<div id="footer">
<a href="#">link 1</a> ¦ <a href="#">link 2</a> ¦ <a href="#">link 3</a>
<p>Copyright 2007, blah blah blah</p>
</div>
</div>
</div>
<div id="bottomOfPage">
</div>
</body>
</html>

[vincevincevince]

#content {
width: 780px;
height: 400px; 

Seems you already have a height there... try taking it out

[Geekpulp]

Tried that, if I take the height out the content area shrinks to nothing and the content items (#contentleft, #contentcenter, #contentright) just sit over the footer.

[edited by: Geekpulp at 9:29 am (utc) on May 24, 2007]

[Geekpulp]

I've also just tried adding height: 100% to the body tag and #content. This seems to do the trick in firefox (although the content area is twice the size it needs to be) but not at all in ie7.

Any other ideas?

[vincevincevince]

Try adding
<br style="clear:both" />
To the very bottom of the 'content' div, just before the </div>

[Geekpulp]

Cool gave that a go and sure enough the content area grows... a little, but it doesn't grow to match the size of the content? the results are the same in both firefox and ie.

[SuzyUK]

Hi Geekpulp and welcome to WebmasterWorld!

The problem is the use of absolute positioning for ALL the columns, once you do that to an element it removes it from the flow, ie. no other element on the page knows it exists. So in your case your footer does not know there's columns above it!

You can't get a footer to stick to the bottom by using a clearing div unless it has content to clear, so in this case it doesn't "know" there's content above it, it's not clearing!

What you can do is change the method of positioning your columns to float them, as they all have widths, and you want the footer to clear whichever column is the longest, you can then use the footer itself as the clearing div.

I played a bit with your measurements and added some color and here's the bits I changed that might help get you started.. you shouldn't need to change your HTML

CSS:
#content {
width: 780px;
/*height: 400px;*/
margin: 0px auto;
padding: 0px;
font-size: 0.9em;
background: #ffc;
}

#contentleft {
/*position: absolute;*/
float: left;
width: 200px;
margin: 32px 0 32px 32px;
background: #fff;
}

#contentcenter {
/*position: absolute;*/
float: left;
width: 284px;
/*margin: 32px 16px 32px 248px;*/
margin: 32px 16px;
background: #abc;
}

#contentright {
/*position: absolute;*/
float: left;
width: 200px;
/*margin: 32px 32px 32px 548px;*/
margin: 32px 32px 32px 0;
background: #fff;
}

#footer {
clear: both;
width: 100%;
background: #cfc url(images/line.gif) repeat-x left top;
text-align: center;
}

ask away if you have any questions, I've commented out your rules and added in my changes, the colors are just there for visual reasons you can remove them!

Suzy

[edited by: SuzyUK at 11:06 am (utc) on May 24, 2007]

[SuzyUK]

added: just realised the code above is likely to trigger the IE double margin bug, so if the columns are not side-by-side in IE6 and below, add:

display: inline;

after all 3

float: left;

rules

[edited by: SuzyUK at 3:36 pm (utc) on May 24, 2007]

[Geekpulp]

Wow great stuff, I'll have a play with this and get back to you. Thanks so much!

[Geekpulp]

Well that did the trick! Very educational too, I’m more or less redoing the whole template based on your feedback. It was a real eureka moment!

Now I’ve run into a ie6 compatibility issue but I think I’ve asked enough of you for one day... see you tomorrow!