CSS - Faux Column Problem

Hi,

I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly.

When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is.

The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly?

It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also?

Thanks.

Hello!

I'm new to CSS, so any help would be greatly appreciated!

I'm working on this page:
sugarhooker[dot]com/testing/index2.html
*The CSS is included in the head

The right column is suppose to start where it says 'Are you hooked...'
It should be right underneath the navigation bar. Anyone know what I'm doing wrong?

Thanks in advance!

Hi,

I've been experiencing a problem that for sure most of you should dealed with, I've found the following article:
http://www.alistapart.com/articles/fauxcolumns/

The problem I'm facing is that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div>, the <div> will only expand down the page 200 pixels.

On the referenced article the proposed solution is to use a background image. However I'm looking for something else, let's suppose the following html code:

Code:

<table>
<tr>
<td width="200" bgcolor="#FFFF00">navigation</td>
<td width="500" bgcolor="#CCCCCC">content</td>
</tr>
</table>

Both cells strecth vertically each other on both directions, is navigation is taller the background in content is stretched, and if the content is taller navigation's background is stretched.

Is possible to achieve this behaviour avoiding tables?

Regards,

Caste

Hello,
I was wondering if there is any good alternative to faux columns to make a 2 column layout, where the 2 columns extend from the top to the bottom of the screen (without a footer). The basic structure looks like this: Code:

<div id="main_container">
	<div id="navigation_menu">
		This div is set to float left with a width of 20% (assuming there's no margin, border and padding)
	</div>
	<div id="contents">
		This div is set to float left with a width of 80% (assuming there's no margin, border and padding)
	</div>
</div>

I want the right side of the navigation div to have a dashed border. Probably this could be achieved by using faux columns, but it's too much of a hassle in my opinion. Whenever I want to change the color or column size of the navigation bar, I have to alter the faux-image. Also when i use this dashed border the faux-image has to be larger than 1 pixel height. It would have to be around 10 pixels (5pixels for the part where the dash is showing and 5 pixels for the part where there's no dash.

Is there really no easier way to extend the color of the navigation div all the way down to the page?

Thanks in advance

Ok, heres what is driving me nuts:

Pretty typical 2 column layout, header, footer, etc.

Although here's the glitch...I'm using css and js to round the corners on most of my divs, so while the js approach works it successfully destroys my rounded corners, this is also why the fauz column hack won't work either.

I have an rss feed in my #sidebar div which being dynamic adjusts the div height to fit the content, great!

my main content area (in this case 2 divs in a container) is fairly static content set at 800px.

Now I can adjust the height of the rss feed however it also successfully breaks my corners (basically the rounded corners stay some where around 750px but the div does expand to 800px with a squared bottom)

Is there anyway to either set the height of my #sidebar or is it possible to have my main content area always expand to the #footer? Geez or anything to solve this problem.

Here's my CSS:

Code:

div#container{width:100%;margin: 0 auto;background-color: #000000; overflow:hidden;text-align: center}
div#header{width:98%;background-color: #000000;padding:0px 0;text-align:center;margin: 0px 0px 0 10px}
#site {width: 100%;margin: 1px 0px 0 10px}
#sidebar {float: left;width: 24%;background-color: #FFFFCC;border-right: 1px solid #000000;text-align:left; overflow:hidden}
#content {float: left;width: 74%;background-color: #FFFFFF}
div#footer{width:98%;background-color: #000000;text-align:center;margin: 0px 0px 0 10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF;font-weight: bold}
#leftcontent {float: left;width:46%;background:#fff;text-align:left; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#rightcontent {float: right;width:46%;background:#fff;text-align:left;padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#leftcontent h1, #rightcontent h1 {font-family: Verdana, Arial, Helvetica, sans-serif;color: #FF0000;font-size: 14px;font-weight: bold; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 0pt}

/* begin styles for RSS Feed 
	This is the most basic style to use for a list with no bullets */
.rss_box {width: 200px; background-color: #FFFFCC; padding-top:5px}
.rss_title, rss_title a {margin: 0px 0;padding: 0;}
.rss_items {list-style:none;margin:0;padding:0;}
.rss_item  {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: x-small;margin-bottom: 1em;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {}
.rss_item a:hover {}
.rss_date {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;}

/* Styles for gliding layers  */
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3 {position:absolute; visibility:hidden;left:0; top:0; z-index:200;width:100px; height:24px;background-color:#FFFFCC;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Here's my HTML (minus content)

Code:

<div id="container" class="clearfix">
<div id="header" class="clearfix">
</div>
<div id="site" class="clearfix">
<div id="sidebar" class="clearfix">
</div>
<div id="content" class="clearfix">
<div id="leftcontent" class="clearfix">
</div>
<div id="rightcontent" class="clearfix">
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="clear:both"></div>
<div id="footer" class="clearfix">
</div>
</div>

Thanks!

Dave

so I have a side menu & main content inside a main container which has background so it looks like side menu & main content have diff. backgrounds and they all of same height..

Problem: I would like to add something to the BOTTOM of the side menu but am not able to do so.. this text has to appear at the bottom of the page even if content of side menu is less..

I could do "position:absolute" and give it top:870. but this is not dynamic as when the main content is larger it appears this text is in the MIDDLE rather than at the bottom?

Hello everyone

I've created a faux background for a website I'm currently working on to create the illusion of a column extending to the bottom of the page.

The url is as follows: http://notquiteperfekt.gamedaemons.net/eruptmediav2/erupt.html

The CSS code I've used is:
body {
background-image: url("images/pgbkg.jpg");
background-repeat: repeat-y;
background-position: 50% 0%;
}

----

When viewing the page in Internet Explorer 5.0+ it lines up fine. However, in order for it to line up successfully, I had to add the following code to nudge my <body> content over:

html body {padding-left:11px;}

----

Fine and dandy, the extra code made things line up quite nicely. Then comes FireFox. The <body> content is 1px to the right of the background & causes the page to be a little off-center. View the previous URL in FireFox to better understand what I mean.

----

When I don't use the html body {padding-left:11px;} then the page is approximately 11-12 pixels off center - however my CSS code tells the background to position itself 50% on the X-axis & my HTML code tells the body to center itself as well via align="center"

Why do these two not line up then?

----

If anyone can view->source to pick out what's causing this & reply back it would be greatly appreciated. You can reply here or e-mail me at sevunx@gmail.com.NOSPAM - I thought I was past all of the headaches with CSS

Hi,

I believe this to be a IE bug that causes the middle click (used for scrolling a page) to be disabled on floating objects.

I've noticed this before in the past but I don't know what the real cause is. If I remember correctly this problem is fixed in IE 7.

The problem is I have 2-3 floating columns centred in the middle of the page (using margin: auto).

Now in firefox when you middle click within the floated objects in the middle of the page you are able to use the scrolling function.

In IE 6 when you middle click on the object it will not work, you have to middle click outside the boundaries in order to scroll. Does anyone know the cause of this strange behaviour? I did a search but I can't seem to find anything about it.

Cheers!

I posted this query over at webdeveloper.com but nobody has offered any working suggestions for a solution, apologies to those who read it there as well.

Basically I have a 2 column layout with a header div containing a floated tabbed navigation bar.

The page.

The css.

As you can see the big red background on my right hand column goes all the way to the top of the page rather than staying below the tab bar.

How can I get it to stay beneath the header and not start after the content ie. not clear it to the bottom?

I'm having problems with my CSS.

I have three columns.

1) Left for navigation
2) Middle for content
3) Right for sidebar

I am using this format for a template. The right sidebar column sometimes will be longer in height than the middle column depending on content of the page.

The Middle column has a 1px solid line on the left and right (using it as a visual divider). So I really want the Middle column to extend and follow the height of the Right sidebar. I can't add the border to the Right sidebar column because it has it's own border already.

What code should I use for the middle column?

I currently have this:

Code:

#middle {
       float: left;
       width: 375px;
       background: #fff;
       margin: 0 auto;
       padding-top: 0px;
       padding-left: 15px;
       padding-right: 15px;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       }

Thanks in advance.

I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help?

Here are my files:

http://www.artesiandesigngroup.com/westcoastpipe/grid.html
http://www.artesiandesigngroup.com/westcoastpipe/includes/main.css

Code:

body {
  font-family: Arial, Helvetica, sans-serif;
      background-color: #fff;
 text-align: center;
     margin: 0; padding: 0; }
/*** outside wrapper including fading background ***/
#container {
       position: relative;
     margin: auto;
   text-align: center;
     width: 840px;
   background: url(../images/layout/bg_page.gif) repeat-y center top; }

/*** actual container ***/
#pagesize {
       margin: auto;
   text-align: center;
     width: 800px;
   background-color: #9B9EA0;
      border: 1px solid #fff;
 border-bottom: none; }

/***  row 1 - top  ***/
#header {
  background-image: url(../images/layout/header.jpg);
     background-repeat: no-repeat;
   background-position: center top;
        margin: 0;
      padding: 0;
     width: 800px;
   height: 252px;
  border-bottom: 1px solid #fff; }
        
/***  Nav inside header  ***/
#topnav {
  position: relative;
     top: 150px;
     width: 800px;
   height: 102px;
  margin: 0;      padding: 0;
     background-color: #005195;
      color: #fff;
    font-size: .7em;
         }
#topnav ul {
  margin: 0; padding: 0; }
#topnav li {
    text-transform: uppercase;
      display: inline;
        list-style-type: none;
  margin: 0;      padding: 2px 4px;
       vertical-align: middle;
 border-right: 1px solid #fff; }

/***  row 2 - middle  ***/
#content {
     background: url(../images/layout/bg_content.gif) repeat-y center top;
   background:color: #fff;
 border: 1px solid #fff;
 border-bottom: none;
    margin: 30px 30px 0 30px;
       padding: 0;
     text-align: left; }

/***  column 1 - left  ***/
#sidebarphotos {
  float: left;
    margin: 0; padding: 0;
  width: 161px;
   font-size: .8em; }

/***  column 3 - right  ***/
#sidenav {
        margin: 0; padding: 0;
  float: right;
   width: 170px;
   background-color: #555;
 font-size: .8em;
        color: #ddd; }

/***  column 2 - center  ***/
#textarea {
  width: 395px;
   margin: 0; padding: 0;
  margin-right: 170px;
    margin-left: 169px;
     background-color: #fff;
 font-size: .9em;
        vertical-align: top; }

/***  header for textarea  ***/
#contentheader {
   margin: 0;
      padding: 4px 8px;
       vertical-align: middle;
 background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
  font-size: 1em;
 font-style: normal;
     font-weight: normal;
    text-transform: uppercase;
      color: #005195;
 line-height: 1em;
       border-bottom: 1px solid #555;
}

/***  row 3 - bottom  ***/
#footer {
      width: 800px;
   margin: 0;
      padding: 2px 0;
 background-color: #005195;
      font-size: .6em;
        color: #fff;
    border-top: 1px solid #fff;
     border-bottom: none;
    letter-spacing: .1em;
}

Thanks in advance!

i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this.
div#column1 {
margin-left: 150px;
width: 70px;
height: 500px;
background: #CCCCFF;
color: blue;}

div#column2 {
margin-left: 250px;
color: black;
background: blue;

}

Yep, there's another multiple column problem!

I'v created this website
to give an example of my problem.

As you can see, the #left and #content seem to ignore the border of the #navigator and slip right over it. This problem appears only in IE, in Mozilla there's no problem at all! What is happening?
Here's the CSS stylesheet I'm using:

body
{
text-align: center;
}

a
{
font-size:12px;
text-decoration:none;
font-weight:600;
font-family:verdana;
}

a:link {color:#FF0741;}
a:visited {color:BDD131;}
a:hover {color:white;}

#container
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 90%;
margin: 10px auto;
font-family:verdana;
font-size:12px;
background-color: #EEF3C9;
color: #FF0741;
line-height: 130%;
}

#Header
{
padding: 0;
background-color: #EEF3C9;
border-style:solid;
border-color:#BDD131;
border-width:1px 0px;
}

#navigation
{
border-style:solid;
border-color:#FFFFFF;
border-width:3px 0px;
text-align:right;
font-size:20px;
background-color:#BDD131;
margin:0;
padding:0;
}

#navigation li
{
display:inline;
padding:20px;
margin:0;
}

#navigation li a:hover
{
color:white;
}

#Left
{
float: left;
width: 200px;
height: 400px;
margin:0px;
background-color:#BDD131;
}

#Content
{
width: 550px;
background-color:#EEF3C9;
margin-left: 210px;
margin-top:10px;
padding: 40px 0px 0px 40px;
}

#End
{
clear: left;
margin: 0;
padding: .5em;
color: #FF0741;
border-style:solid;
border-color:#FFFFFF;
border-width:3px 0px;
background-color: #BDD131;
}

[/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column.

Here is an example:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xyzTrader.com</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
</head>
<body id="type-b"><!---->

<div id="wrap">

	<div id="header">

		<div id="site-name">xyzTrader.com</div>
		<div id="search">
			<form action="">
			<label for="searchsite">Site Search:</label>
			<input id="searchsite" name="searchsite" type="text" />
			<input type="submit" value="Go" class="f-submit" />
			</form>
		</div>
	</div>

	<div id="content-wrap">
		<div id="login">
					<form method="post" action="/test/header.php">
		  Username <br />
		  <input name="uname" type="text" id="uname">
		  <br />
		  Password<br />
		  <input name="pword" type="password" id="pword">
		  <br />
		  <input name="Login" type="submit" id="Login" value="Login">
		</form>
				</div>

		<div id="utility">

		<ul id="nav-secondary">
		<li class="first"><b>Catagories</b></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>


		</div>

		<div id="content">
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		<p>hello<br>sfafssf</P>

and here is the css file:
Code:

/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer} 
a:link {color:#c00} 
a:visited {color:#999} 
a:hover,a:active {color:#069} 

/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
	

/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}

/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
	ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}

dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}

/* GENERAL */
img {border:none} 
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px} 

/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}

	#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
	
	/* SEARCH */
	#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
	#search form {margin:0}
	#search input {width:8em;margin: 0 0 -1px;height:1.2em}
	#search label {padding:5px 0 0;display:inline}
	#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}

/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
	#login   {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
	#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
	#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}

#content {margin: 0 50px}
	#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
	#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
	#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}

/* LAYOUT TYPE B */
	#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
	#type-b #content {margin: 0 23px 0 235px}

/* SECONDARY NAVIGATION - vertical navigation */
	#nav-secondary, #nav-secondary ul {position:static}
	#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
	#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
	#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
	#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
	#nav-secondary a:link {color:#000} 
	#nav-secondary a:visited {color:#000} 
	#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
	#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
	#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

/* SECONDARY NAVIGATION - 2nd TIER */
	#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
	#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
	#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
	#nav-secondary li.active li {border: none;margin:0}
	
	#nav-secondary li.active li.active a:link, 
	#nav-secondary li.active li.active a:visited, 
	#nav-secondary li.active li.active a:hover, 
	#nav-secondary li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 3rd TIER */
	#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
	#nav-secondary li.active li.active li a:link, 
	#nav-secondary li.active li.active li a:visited, 
	#nav-secondary li.active li.active li a:hover, 
	#nav-secondary li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 4th TIER */
	#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
	#nav-secondary li.active li.active li.active li a:link, 
	#nav-secondary li.active li.active li.active li a:visited, 
	#nav-secondary li.active li.active li.active li a:hover, 
	#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}

/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
	#footer p {margin:0}
	#footer a:link {color:#999}

Can anyone give me some advice or what to do to make this line go the length of the page??

Thanks in advance,
Mike

I have a two column, three row layout for my website. I'm having
problems where my left column is longer than the middle "main" content,
and when that happends it overlaps my footer instead of pushing it
down.

Would someone mind looking at my html/css and tell me how I can fix
this issue?

Link: http://mividdesigns.com/csshelp.html

By the way, it works/looks fine in FF, but I have problems in IE.

Thank You!