Div Height Problem!

[mikebarbaro]

Hello,

I have a containing div with 2 divs nested within making a 2 column layout. The containing div has a background repeating on the y axis. The issue I'm having is that the right column will not inherit the entire background the whole way down. An example of this is at http://barbarostudios.com/clientpreviews/thestudiosewickley/classes.php

Here is what I have for the layout HTML:

<div id="content_inner">
<div id="content_inner_left">
</div>
<div id="content_inner_right">
</div>
</div>

Here is my CSS:

#content_inner {
	margin: 0 auto;
	text-align:left;
	width:1044px;
	padding:3px;
	font-family:Verdana, Geneva, sans-serif;
	color:#000;
	font-size:12px;
	background-image:url(images/bg_content_inner.png);
	background-repeat:repeat-y;
	background-attachment:fixed;
	background-position:center;
}
#content_inner h1 {
	font-family: "gnuolane", Verdana, Tahoma;
	font-size:32px;
	color:#000;
}
#content_inner_left {
	float:left;
	padding-left:20px;
	padding-right:20px;
	width:700px;
	background:inherit;
	height:auto;
}
#content_inner_right {
	text-align:left;
	float:right;
	width:284px;
	height:auto;
	padding-right:20px;
	font-family:Verdana, Geneva, sans-serif;
	color:#000;
	font-size:12px;
	background:inherit;
}

Any help is highly appreciated as this has been bugging me for hours! Thanks!

 

[PixelPusher]

Looking at the site, it seems that the issue is resolved? The background (shadow edge image) repeats all the way down on both sides.

However, the markup could be cleaned up bit. Like so:

<div id="content_inner">
  <div>
     <!--Left column-->
  </div>
  <div class="sidebar">
     <!--Right column-->
  </div>
</div>

div#content_inner {
	margin: 0 auto;
	width:1044px;
	padding:3px;
	font:normal 12px/16px Verdana, Geneva, sans-serif;
	color:#000;
	background:transparent url(images/bg_content_inner.png) center fixed repeat-y;
}
div#content_inner h1 {
	font:bold 32px/45px "gnuolane", Verdana, Tahoma;
	color:#000;
}
div#content_inner > div {
	float:left;
	margin-right:20px;
        padding-left:20px;
	width:700px;
}
div#content_inner div.sidebar {
       margin:0;
       padding:0 20px 0 0;
       width:284px;
}