HTML - 3 Column Layout With Fixed Left And Right Columns

Hi,

I have the following problem i'm trying to solve with HTML:

I have a simple table with 3 columns.
I want the table to have a 100% width of the screen.
Furthermore the center column must ALWAYS have a width of 1000.
The left and right column should just be there too fill the gaps up if you have a wider screen than 1000.
Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0.

How can I solve this? Some example could would be highly appreciated

Thanks,
betonboor

Hi!
I've been trying to figure out why columns in my HTML-table get weird widths.

ie. this code:
HTML Code:

        <table width="950" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="5">
                    column1
                </td>
                
                <td colspan="5">
                    column2
                </td>
            </tr>

            <tr>
                <td colspan="5">
                    <input type="text" value="column3" maxlength="20" style="width:165px;" />
                </td>
                
                <td colspan="5">
                    column4
                </td>
            </tr>
            
            <tr>
                <td>1</td>
                
                <td>2</td>
                
                <td>3</td>
                
                <td>4</td>
                
                <td>5</td>     
                
                <td>6</td>
                
                <td>7</td>
                
                <td>8</td>
                
                <td>9</td>
                
                <td>10</td>                                                                            
            </tr>
        </table>

gives me the result:


Is there any way I can fix this so each of the columns get's equal size? Preferably without actually having to have to set the width on each of the bottom columns.

If not, could anyone explain to me why it's acting this way?

Thanks.

Hey,
I have a sample page he www.darkdayssoftware.com/indexotheridea.html

How do I make space for and create a column down the left and right (e.g. a space for adverts) and ensure that when I resize the web paste, the main column in the middle doesn't overlap the column to the left, and similarly the column on the right doesn't overlap the column in the middle?

Thanks

Hi all, Im afraid im getting a little frustrated. My fault..

Im new here but need your help.

I run a forum, phpbb3 based but the style im currently using is very much HTML based. I am looking to have a left hand column within my forum but really dont know how to do it, well to add to what i already have.

I think for you to know what style docs i have you would have to have a look yourself or look at my existing source code..

http://www.pricelessparrots.com/phpbb3/

Ok i have the new style ' VistaX '.

This link will take you to the original download:

It can be found he

It seems this style is mostly created using HTML. Could someone please tell me how to add a left hand column to the page. I would like it to be on the left hand side all the way down after the header.

I thought i would have a go at it but becoming increasingly frustrated with it. such a simple thing but i cannot get it.

Do i float it, using css or what?

I thought about using a seperate page to create the table and then include it into the doc but this doesnt work either.

Plz help..
Paul

can i have fixed layout for only some part of a table?
I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'.
How can I achieve this?
Thanks!

I've attached the code for a template I'm wanting to use.

I want to add a column to the left side of the page that runs the length of the page.

Is there anyone out there who can assist me with the code to do that.

I'd be exceedingly grateful. I'm afraid I'm table dyslexic.

Thanks in advance to anyone who can help.

What would be the best way to center the items listed in the left column?

Thank you.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN">
<html><head>
	<title>test</title>
    <script src="java.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="styles.css">
<style type="text/css">
.test{background-color:#ffdead;}
#header {
	width: 830px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -15px;
        background-color: #ffdead;
}
#header_table {
	width: 75%;
	border-collapse: collapse;
	border: solid 1px;
	border-color: #b7b7b7;
}
.header_bar {
	padding: 0px;
	margin: 0px;
	border-bottom-style: solid;
	border-bottom-width: 10px;
	border-bottom-color: #b7b7b7;
	background-color: #800000;
	width: 150px;
	border-collapse: collapse;
	border-right-width: 0px;
	border-left-width: 0px;
}
.header_body {
	padding: 0px;
	margin: 0px;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #b7b7b7;

	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #b7b7b7;
}

</style>
</head>
<body bgcolor="#ffffff">
	<table id="header_table" align='center' cellpadding='0' cellspacing='0'>
		<tr>
			<td class="header_bar" colspan='2'>&nbsp;</td>
		</tr>
		<tr>
			<td align='center' colspan='2'>
				<img src="imgi/img11.jpg" height="134" width="461">
				<img src="imgi/topimg2.jpg" height="160" width="309">
			</td>
		</tr>
		<tr>
			<td class='header_body' valign='top' width="200">
				<form action="login.asp" method="post">
				<table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" >
					<tr><td valign="top" class='header_bar' colspan='2'>&nbsp;</td></tr>
					<tr>
<!-- SIDE MENU -->
	<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<!-- MENU FOR LOGGED MEMBER ONLY -->
						<td colspan="2"><br><br>Welcome  <i><%'=Session("PMMS_NAME")%></i><br /><br /></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a class="lnk" href="profile.asp">My Profile</a></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a class="lnk" href="_purchase.asp">Purchase</a></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a class="lnk" href="newsletter.asp">Newsletters</a></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a class="lnk" href="members.asp">Member List</a></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a class="lnk" href="members_by_group.asp">Group Member List</a></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a class="lnk" href="file_cate.asp">File Repository</a></td>
					</tr><tr>
						<td width="15">&ordm;</td>
						<td><a href="login.asp?logout=True">Log Out</a></td>
					</tr>
<!-- [ MENU FOR LOGGED MEMBER ONLY ] -->

<% Else  ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%>
										<!-- INCLUDE LOGIN FORM -->
						<br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td>
					</tr><tr>
						<td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td>
					</tr><tr>
						<td>
							<br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br />
							<input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a>
						</td>
					</tr>
					<tr>
						<td>
							<br />
							<input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" />
										<!-- [ INCLUDE LOGIN FORM ] -->

<% End If %>
						</td>
					</tr>
					<tr>
						<td>
							<br /><br />
							<img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br>
							<img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br>
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
							<img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a>
<% Else %>
							<img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br>
<% End If %>
							<img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br>
							<img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br />
							</a>
<!-- [ SIDE MENU ] -->
							<br /><br />
						</td>
					</tr>
				</table>
				</form>
			</td>
			<td class='header_body'>
<!-- MAIN PAGE CONTENT -->

I have a left menu column but it's not stretching down the length of the page. The page is quite long and when the links are finished on left column it just ends and as it has abackground colour it looks a little strange. It is floated left and the main_section is also floated left. It is the main section div that is long. I was thinking because this is in a div that the left coumn is also in that the left column would therefore stretch to the length of it's parent div.

Any ideas?


http://absolute-websites.com/services.html is the link so you can see what I'm talking about.

Here is a section of the HTML :

HTML Code:

    
              <div class="left_column">
                   <div class="breadcrumb"><p><a  href="index.html">home  ></a>services</p></div>
            <div class="icons"><p><a href="services.html#websiteProduction"><img src="images/webIcon-01.png" title="web building" alt="web building icon"/></a></p></div>

            <div class="icons"><p><a href="services.html#hosting"><img src="images/hostingImgIcon-01.png" title="Hosting & Domain Names" alt="Hosting & Domain Names icon"/></a></p></div>
            <div class="icons"> <p><a href="services.html#seo" ><img src="images/seo2Icon-01.png" title="Search Engine Optimisation" alt="Search Engine Optimisation icon"/></a></p></div>
             <div class="icons">  <p ><a href="services.html#marketing"><img src="images/advertsIcon-01.png" title="Marketing" alt="marketing icon"/></a></p></div>
            <div class="icons"><p ><a href="services.html#design" ><img src="images/designImgIcon-01.png" title="Design" alt="Design icon"/></a></p></div>
            <div class="icons"> <p ><a href="services.html#photo" ><img src="images/photoIcon-01.png" title="Photoditing" alt="Photoediting icon"/></a></p></div>
             <div class="icons"> <p><a href="services.html#video" ><img src="images/videoIcon-01.png" title="Video Production" alt="Video Production icon"/></a></p></div>
        
		</div>

        
        
        <div id="main_content" class="fl">
            <h1 class="h1SecHead" >>SERVICES</h1>
        
        

Good day,

I am brand new here in this forum. So many knowledgeable folks here.

I am relatively new to web design. I typically use templates and themes and tweak them. I can navigate a CSS doc and html to make changes, etc. However, I have a client who has an existing site that she wants to keep the aesthetic of and so I am using what the previous designer left. It is a simple html page with tables. Simple enough. Very elegant visually. No need to SEO really so it works.

She has asked if we can make the left column of a two column table scroll independently. The page content is about over 6000px. The scroll column will contain a page outline and other text that will include internal targeted links. This is outside my skill set, but I want to learn. Have searched the net and found some suggestions but want it to be clean and ended up here.

There is no style sheet other than the ie6 sheet.

Page is he http://www.themedeaproject.com/proposaltestpage.html no graphics are loaded.

Can anyone point me to a good tutorial or have any suggestions?

Thanks!

BlueEyedMonkey aka Tatyanna

I'm having so much trouble with this. I have a site (from photoshop) that will have have fluid layout (100% width) but I want the footer to "stick" to the bottom of the window (unless content goes longer).

Here is content part of the html (which is a bit messed up now from trying many things)


<div id=container>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr></tr>
<tr>
<td height="235" bgcolor="#FFFFFF">&nbsp;</td>
<td width="1000" rowspan="5" valign="top"><!-- ImageReady Slices (screencapture3.psd) -->
<table width="1002" height="400" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td height="58" colspan="9"><img src="images/rightthere_01.jpg" width="417" height="58" alt="" /></td>
<td colspan="10"><img src="images/screencapture2_01.jpg" width="583" height="58" alt="" /></td>
</tr>
<tr>
<td colspan="9"><img src="images/rightthere_logo.jpg" alt="" width="417" height="76" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/seniors.jpg" alt="" width="140" height="177" border="0" /></td>
<td width="139" rowspan="2"><img src="images/caregivers.jpg" alt="" width="139" height="177" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/physicians.jpg" alt="" width="142" height="177" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/disabilities.jpg" alt="" width="162" height="177" border="0" align="top" /></td>
</tr>
<tr>
<td height="101" colspan="9"><img src="images/inhome_tagline.jpg" alt="" width="417" height="101" border="0" /></td>
</tr>
<tr>
<td colspan="19" bgcolor="#69781B"><img src="images/nav_top.jpg" width="1000" height="51" alt="" /></td>
</tr>
<div id:navigation></div>
<td width="59"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','images/about_ro.jpg',1)"><img src="images/about.jpg" name="Image44" border="0" id="Image44" /></a></td>
<td width="15"><img src="images/div1.jpg" width="15" height="17" alt="" /></td>
<td width="144"><a href="why.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image45','','images/why_ro.jpg',1)"><img src="images/why.jpg" name="Image45" width="144" height="17" border="0" id="Image45" /></a></td>
<td width="17"><img src="images/div2.jpg" width="17" height="17" alt="" /></td>
<td width="114"><a href="what.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image46','','images/what.jpg',1)"><img src="images/what.jpg" name="Image46" width="114" height="17" border="0" id="Image46" /></a></td>
<td width="17"><img src="images/div3.jpg" width="17" height="17" alt="" /></td>
<td colspan="4" bgcolor="#8B9849"><a href="who.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/who_ro.jpg',1)"><img src="images/who.jpg" name="Image43" width="127" height="17" border="0" id="Image43" /></a></td>
<td width="16"><img src="images/div4.jpg" alt="" width="16" height="17" align="left" /></td>
<td colspan="3"><a href="consider.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image47','','images/consider_ro.jpg',1)"><img src="images/consider.jpg" name="Image47" width="195" height="17" border="0" id="Image47" /></a></td>
<td width="19"><img src="images/div5.jpg" width="19" height="17" alt="" /></td>
<td colspan="2"><a href="careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image48','','images/careers_ro.jpg',1)"><img src="images/careers.jpg" name="Image48" width="188" height="17" border="0" id="Image48" /></a></td>
<td width="19"><img src="images/div6.jpg" width="19" height="17" alt="" /></td>
<td width="70"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image49','','images/contact_ro.jpg',1)"><img src="images/contact.jpg" name="Image49" width="70" height="17" border="0" id="Image49" /></a></td>
</tr>
<tr>
<td colspan="19" bgcolor="#6A791C"><img src="images/nav_bot.jpg" width="1000" height="42" alt="" /></td>
</tr>
<tr></tr>
<tr>
<td colspan="7"><div id=leftcontent>&nbsp;
<h4>Left Content</h4>
</div></td>
<td width="4">&nbsp;</td>
<div id=maincontent>
<td colspan="11"><h1>Main Content</h1></td>
</div>
</tr>
<tr>
<td><img src="images/spacer.gif" width="59" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="15" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="144" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="114" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td width="42"><img src="images/spacer.gif" width="42" height="1" alt="" /></td>
<td width="76"><img src="images/spacer.gif" width="76" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="16" height="1" alt="" /></td>
<td width="48"><img src="images/spacer.gif" width="48" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="139" height="1" alt="" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td width="115"><img src="images/spacer.gif" width="115" height="1" alt="" /></td>
<td width="73"><img src="images/spacer.gif" width="73" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="70" height="1" alt="" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="110" bgcolor="#869343">&nbsp;</td>
<td height="110" bgcolor="#6A791C">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</tr>
</div>
<div id= "footer">

<td width="100%" height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<td width="0%" bgcolor="#859242">&nbsp;</td>
<td width="1000" bgcolor="#697819"><img src="images/footer.jpg" alt="" height="79" /></td>
<td width="26%" bgcolor="#697819">&nbsp;</td>
</tr></table>
</div></tr></tr></body>
</html>


and my css

p { color: #6a6a6a; font-size: 15px; line-height: 20px; font-family: georgia, "Lucida Grande", Verdana, Arial ; top: 0; margin-top: 0; }
h1 { color: #667824; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; }
h4 { color: #4d4f53; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; }
h2 { color: #667824; font-size: 20px; font-family: Arial, Verdana }
h3 { color: #fff; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; }
ul { color: #667824; font-weight: bold; font-size: 12px; font-family: verdana, Arial ; line-height: 14px; }
h5 { color: #4d4f53; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; }
A:link {text-decoration: none; color: 667824}
A:visited {text-decoration: none; color: B71234}
A:active {text-decoration: none}
A:hover {
color: B7CEC4;
text-decoration: none;
}


html, body {
margin:0;
height: 100%;
width: 100%
}

body >#container {
margin:0;
padding:0;
height:auto;
min-height:100%;
position:relative;

}


#clearfooter {overflow:auto;
padding-bottom: 79px;}


#maincontent {
float:left;
min-width: 100px;
}

#leftcontent {
min-width: 50px;
}
#left{
left: -1;
right: 0;
min-width: 100px;
max-width: 200px;
min-height: 235px;
}

#centerleft{
left: -1;
right: 0;
min-width: 172px;
max-width: 200px;
min-height:100px;
}

#right {
position:relative;/*ie needs this to show float */
min-width:1px;
max-width:200px;
float:right;
}
#footer {
width:100%;
text-align:center;
position:relative;
margin:0;
height:79px;
clear:both;

}
#navigation {
max-width: 1000px;
vertical-align; top;
text-align: left;
}


table {
border-collapse: collapse;
}




please help.

Hi there,
I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks

the site: http://guild-paragon.com/indexframe

edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though

I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ...

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2006  -->
<!--           http://www.coffeecup.com/           -->
<!--        Brewed on 9/9/2010 12:48:26 PM         -->

<head>
    <title>Zone Map</title>
<style type="text/css">

#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}

#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}

#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}

#container {
width: 800px;
}

#col_right {
position: relative;
float: right;
width: 250px;
}

#col_center {
position: absolute;
float: center;
width: 250px;
}

#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>

<body>
<p align="center">
	  <img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

<div id="container">

<div id="col_left">  
  
<p id="head"><br>ZONE 1: $750 minimum</p>

<div id="dotted"></div>

<p id="content">
NJ*** all,<br>
NY***Long Island to Islip,<br>
MD** to Salisbury,<br>
PA** Pittsburgh-Williamsport-Wilkes Barre,<br>
VA** Richmond-Front Royal,<br>
WV* to Martinsburg, Fairmont,<br>
DE** all</p>
</div>

<div id="col_center">

<p id="head"><br>ZONE 2: $1,500 minimum</p>

<div id="dotted"></div>
 
<p id="content"> 
NY** Syracuse-Albany-Long Island,<br>
CT** Hartford-New Haven,<br>
PA** west of Pittsburgh-Erie,<br>
OH** Sandusky-Columbus, Ashland,<br>
VA** south of Richmond-Roanoke,<br>
WV*  south and west of Fairmont to Bluefield,<br>
MA*  Pittsfield-Buzzards Bay-Monomet</p>
</div>

<div id="col_right">

<p id="head"><br>ZONE 3: $2,500 minimum</p>

<div id="dotted"></div>
 
<p id="content"> 
VA** south and west of Roanoke,<br>
TN***Chattanooga-Nashville,<br>
KY** Hopkinsville-Madisonville,<br>
IN***Evansville,<br>
IL***Urbana, Chicago,<br>     
MI</p>
</div>

</div>
</body>
</html>

This is both HTML and CSS-oriented.

Current CSS code pertaining to the layout:
Code:

#listnav {
    background: url('../images/listnav-bg.png') top left repeat-x;
    width: 25%;
    padding: 8px;
    float: left;
}

#content {
    width: 75%;
    padding:  8px;
    float: right;
}

#footer {

}

#main-wrapper {
    width: 85%;
}

HTML:
HTML Code:

<div id="main-wrapper">
        <div id="listnav">
            <!-- some spacer stuff here so i can actually see stuff (no static height set) -->
        </div>

        <div id="content">
            <!-- some spacer stuff here so i can actually see stuff (no static height set) -->
        </div>
</div>

The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side.

Any ideas? :|

Hi guys, I have a problem.

Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this?

http://automata.firephoenixnet.com/74s/

Thanks in advance guys.