CSS menu and main content areas

[JeremyW]

Is there a way I can change this style sheet so that the menu and main content areas can expand in height depending on how much text is in the main content area instead of being fixed?

#wrapper {
width: 75%;
height: 714px;
border-width: 2px;
border-style: solid;
border-color: #75b844;
}
 
#header {
width: 100%;
height: 214px%;
background: #75b844;
}
 
#menu {
width: 25%;
height: 500px;
background: #75b844;
float: left;
}
 
#content {
width: 75%;
height: 500px;
float: left;
}

[Dan Schulz]

Jeremy, what does the HTML code that this goes with look like, and do you have a link to a demo I could look at?

(In the meantime, perhaps this could help you?)

[ntlarson]

In general you can remove the fixed height issue in two ways. One, you can simply remove the "height: XXpx;" line from the CSS and the div will expand or shrink to an appropriate height in relation to the content in the div. Two, you can use the "min-height: XXpx;" option which will put the div at a static minimum height and expand it if necessary to the height of whatever the content is but the div will not shrink below the min-height number. Alternatively you can keep the static height and use the overflow property to view all the content of that div if you don't want it expanding beyond a certain point.

[JeremyW]

So basically their is a wrapper that holds everything. Then there is a header at the top. Underneath the header there is a menu at the left and a main content area at the right.

[Dan Schulz]

You mean like this? (As far as the HTML code goes.)

<div id="container">
	<div id="header">
		
	</div>
	<ul id="menu">
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
			
		</div>
	</div>
	<div id="footer">
		
	</div>
</div>

[JeremyW]

Yeah except I don't have a footer.

[Dan Schulz]

Not needed.

(Well, the footer code anyway - gimme a few while I write something up for ya.)