Annoying height issue...

[suttercain]

Hi guys,I am in the process of converting my site over from tables to 100% CSS. The problem is my template. I have a left and right side (left for content, right for ads) and these are both placed in a wrapper. See site here:http://www.supermandatabase.com/comics/1979/As you can see the right content 'breaks' into black. I have each the right and left set with a minimum height but when one exceeds it, the other goes to black. I tried making the wrapper have a white background, but that didn't work as planned. It fixed the black back but also added white to the header.I also tried setting all parent styles to 100% height, and that didn't work either. Any ideas?Thanks.

body {font-family:Arial, Helvetica, sans-serif;font-size:12px;margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: 0pt;padding-top: 0pt;padding-right: 0pt;padding-bottom: 0pt;padding-left: 0pt;background-image:url(images/bg.gif);background-repeat:repeat-x;background-color:#000;height:100%;}h2 {margin-top:1px;margin-bottom:5px;color:#000066;font-size:28px;font-weight:bold;border-bottom:1px solid #9296a2;}#wrapper {  margin: 0 auto; width: 922px; height:100%;}.ad {  background-color:#FFFFFF;}#header { color: #333; background-image:url(images/logo.gif); background-position:left; background-repeat:no-repeat; width: 922px; float: left; padding: 0px; border: 0px solid #ccc; height: 127px; margin: 0px 0px 0px 0px;}.topCont { background-image:url(images/topCont.gif); background-position:left; background-repeat:no-repeat; float: left; width: 920px; padding: 0px; height: 6px; margin: 0px 0px 0px 0px;}.botCont { background-image:url(images/botCont.gif); background-position:left; background-repeat:no-repeat; float: left; width: 920px; padding: 0px; height: 6px; margin: 0px 0px 0px 0px;}.botAdCont { background-image:url(images/botAdCont.gif); background-position:left; background-repeat:no-repeat; float: left; width: 300px; padding: 0px; height: 6px; margin: 0px 0px 0px 0px;}#leftcolumn {  color: #333; font-size:13px; border-left: 1px solid #9296a2; background: #fff; margin: 0px 0px 0px 0px; padding: 0px 5px 5px 5px; min-height: 676px; width: 599px; float: left; height:100%;}#rightcolumn { float: left; color: #333; border: 0px solid #ccc; background-color: #fff; border-right: 1px solid #9296a2; margin: 0px 0px 0px 0px; padding: 1px 5px 5px 5px; min-height: 675px; width: 299px; display: inline; height:100%;}.footer {  width: 900px; clear: both; text-align:center; font-size:10px; color: #9296a2; margin: 0px 0px 5px 0px; padding: 10px; background-color:#000000;}

[jlhaslip]

I'm not seeing a problem currently. Might need to reset the css file to the original state or such thing.i checked with ie7 and FF2. Both look okay with a full white 'centre' section.

[suttercain]

I'm not seeing a problem currently. Might need to reset the css file to the original state or such thing.i checked with ie7 and FF2. Both look okay with a full white 'centre' section.

Hi Jlhasplip,I tried it on a new computer (the one I am on now) and I am having that same issue. Notice the screenshots below. The first one has the issue on the left side (a small black line) and then the second one has the issue on the right (a much bigger black space).

[jlhaslip]

Without looking at your code or your site, google "faux columns" might be the answer, or perhaps use a wrapper div to contain the left and right sides inside a div with the same background-color so if the content is short, then the div behind won't let the body colour show through.If you don't understand my explanation, email me and I should have a page I can send that will explain it better.*edit*Had some time, so add a background-color to your #wrapper should work, indeedsorry about not replying correctly the first time, but maybe that will act as an explanation of what is happening to your page.Here is a corrected version. Thee was some junk out of place down at the bottom. The wrapper was closing too early, it seems.Also, run it thriugh the w3c validator. Lots of missing end tags. Tags need to be closed in the doctype you are using, most of your are br tags and a couple of meta tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" name="Supergirl #4"><meta name="keywords" content="Superman Returns, Brandon Routh, Bryan Singer, Christopher Reeve, Chris, Superman, Man of Steel, Daily Planet, Lois Lane, Clark Kent, Jimmy Olsen, Olson, Perry White, Comics, Television, Movies, Superman Database, Fandom, Pictures, Logo, Emblem, Lex Luthor, Kryptonite, Symbol, Images, Chat, Animated Series, STAS, Cartoons, SuperFriends, Books, Episode Guides, Reviews, Cover, Animation, Smallville, Justice League, superhero, superheroes"><title>Superman Database | Supergirl #4</title><script type="text/javascript" src="Superman%20Database%20_%20Supergirl%20%234_files/jquery.js"></script><script type="text/javascript" src="Superman%20Database%20_%20Supergirl%20%234_files/interface.js"></script><link rel="stylesheet" type="text/css" href="Superman%20Database%20_%20Supergirl%20%234_files/style.css" /><style type="text/css" media="screen">img{	border: none;}#ImageBoxOverlay{	background-color: #000;}#ImageBoxCaption{	background-color: #F4F4EC;}#ImageBoxContainer{	width: 250px;	height: 250px;	background-color: #F4F4EC;}#ImageBoxCaptionText{	font-weight: bold;	padding-bottom: 5px;	font-size: 13px;	color: #000;}#ImageBoxCaptionImages{	margin: 0;}#ImageBoxNextImage{	background-image: url(images/imagebox/spacer.gif);	background-color: transparent;}#ImageBoxPrevImage{	background-image: url(images/imagebox/spacer.gif);	background-color: transparent;}#ImageBoxNextImage:hover{	background-image: url(images/imagebox/next_image.jpg);	background-repeat:	no-repeat;	background-position: right top;}#ImageBoxPrevImage:hover{	background-image: url(images/imagebox/prev_image.jpg);	background-repeat:	no-repeat;	background-position: left bottom;}</style></head><body><div id="wrapper">   		 <!-- Begin Header -->		 <div id="header">		 <div id="tabsH">  <ul>	<li><a href="http://www.supermandatabase.com/" title="Home"><span>Home</span></a></li>	<li><a href="http://www.supermandatabase.com/comics" title="Comics"><span>Comics</span></a></li>	<li><a href="http://www.supermandatabase.com/forums" title="Forums"><span>Forums</span></a></li>	<li><a href="http://www.supermandatabase.com/contact" title="Contact"><span>Contact</span></a></li>  </ul></div>				  </div><!-- End Header --><div class="topCont"></div>		 		 <!-- Begin Left Column -->		 <div id="leftcolumn">		 <span class="comicTitle">Supergirl #4</span><a href="http://www.supermandatabase.com/images/4ndvddb/images/sg50004v.jpg" title="Supergirl #4" rel="imagebox-bw"><img src="Superman%20Database%20_%20Supergirl%20%234_files/sg50004v.jpg" class="comicImg" width="150"></a><span class="comicInfo"><b>Story:</b><br>JLA<br><br><b>Cover Date:</b><br>January, 2006<br><br><b>Writers:</b><br>Jeph Loeb<br><br><b>Plot:</b><br><strong>Story:</strong><br>Pyramid Schemes<br><br><strong>Plot:</strong><br><a href="http://www.supermandatabase.com/comics/1979/modules.php?name=Feedback">Send Us This Plot.</a><br><br><b>Superman's Role:</b><br>Supporting<br><br><b>Type:</b><br>Comic Book<br><br><b>Run:</b><br>Long Running<br><br><b>Age:</b><br>Modern<br><br><b>Volume:</b><br>4<br><br></span>				 <img src="Superman%20Database%20_%20Supergirl%20%234_files/comments.jpg" alt="Comments">		 <span class="boxCont">		 Please Login or Register to Post Comments		 </span>		 </div>		 		 <!-- End Left Column -->		 		 <!-- Begin Right Column -->		 <div id="rightcolumn">		 <img src="Superman%20Database%20_%20Supergirl%20%234_files/comictools.jpg">		 <span class="comicTools">		 <img src="Superman%20Database%20_%20Supergirl%20%234_files/add.png" class="comicToolsImg">		 <img src="Superman%20Database%20_%20Supergirl%20%234_files/email.png" class="comicToolsImg">		 <img src="Superman%20Database%20_%20Supergirl%20%234_files/post.png" class="comicToolsImg">		 </span>			 <script type="text/javascript">					 <!--amazon_ad_tag = "thesupermanda-20";  amazon_ad_width = "300";  amazon_ad_height = "250";//--></script>					 <script type="text/javascript" src="Superman%20Database%20_%20Supergirl%20%234_files/ads.js"></script><script src="Superman%20Database%20_%20Supergirl%20%234_files/ads-common.js" type="text/javascript"></script><iframe src="Superman%20Database%20_%20Supergirl%20%234_files/cm.htm" marginwidth="0" marginheight="0" border="0" style="border: medium none;" frameborder="0" height="250" scrolling="no" width="300"></iframe>		 <br>		 <script type="text/javascript"><!--google_ad_client = "pub-5010266620835785";google_ad_width = 300;google_ad_height = 250;google_ad_format = "300x250_as";google_ad_type = "text_image";google_ad_channel = "";google_color_border = "000000";google_color_bg = "FFFFFF";google_color_link = "000000";google_color_text = "000000";google_color_url = "000000";//--></script><script type="text/javascript" src="Superman%20Database%20_%20Supergirl%20%234_files/show_ads.htm"></script>	 		 </div>		 <!-- End Right Column -->		 <div class="botCont"></div>		 <!-- Begin Footer -->   <div class="footer">			Site designed, programmed and maintained by <a href="http://www.shannoncronin.com/">Shannon Cronin</a> using <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.supermandatabase.com%2Fcss%2Fstyle.css">CSS</a>, PHP, MySQL, <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and JavaScript.  		 </div>		 <!-- End Footer -->		 </div>   <!-- End Wrapper --><script type="text/javascript">$(document).ready(	function()	{		$.ImageBox.init(			{				loaderSRC: 'http://www.supermandatabase.com/images/loading.gif',				closeHTML: '<img src="http://www.supermandatabase.com/images/close.jpg" />'			}		);	});</script><div style="position: absolute; display: none; top: 0pt; left: 0pt; opacity: 0;" id="ImageBoxOverlay"> </div><div style="overflow: hidden; display: none; position: absolute; top: 0pt; left: 0pt; text-align: center; background-color: transparent;" id="ImageBoxOuterContainer"><div style="margin: 0pt auto; overflow: hidden; display: none; position: relative; text-align: left; top: 0pt; left: 0pt; z-index: 2;" id="ImageBoxContainer"><img style="position: absolute;" id="ImageBoxLoader" src="Superman%20Database%20_%20Supergirl%20%234_files/loading.gif"><a style="overflow: hidden; position: absolute; display: none; text-decoration: none;" href="#" id="ImageBoxPrevImage"> </a><a style="overflow: hidden; position: absolute; text-decoration: none;" href="#" id="ImageBoxNextImage"> </a></div><div style="margin: 0pt auto; position: relative; text-align: left; z-index: 1;" id="ImageBoxCaption"><div style="padding-left: 10px;" id="ImageBoxCaptionText"> </div><div style="padding-left: 10px; padding-bottom: 10px;" id="ImageBoxCaptionImages"> </div><a style="position: absolute; right: 10px; top: 0pt;" href="#" id="ImageBoxClose"><img src="Superman%20Database%20_%20Supergirl%20%234_files/close.jpg"></a></div></div></body></html>