asked on

Make DIV height match content CSS

I'm having an issue making the div grow to fit the content.
I've tried changing just about everything around - but I can't see what I'm doing wrong.

I've attached the page & css. You'll see that left column has a bunch of <br /> tags and the word Hello at the bottom.

In IE8, i can read the "Hello" - in fire fox, it's behind the bottom crimson bar.

Any help would be appreciated!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
@charset "utf-8";
/* CSS Document */

* { padding:0; margin:0; }


html, body{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	height:100%;
	width:100%;
	margin:0px;
	padding:0px;
	background:#333333;
}

#wrapper{
	position:relative;
	width:1020px;
	margin:auto;
	margin-top:20px;
	border:#FFFFFF solid 1px; 
}

#topSec_sub{
	background-color:#2D0101;
	width:100%;
	height:160px;
	position:relative;
}

#logo{
	position:absolute;
	z-index:10;
	left: 22px;
	top: 33px;
}

#midline{
	background-color:#FFFFFF;
	height:3px;
	width:100%;
	position:relative;
}

#indexBody{
	background-color:#e8e8e2;
	position:relative;
	min-height:460px;
}

#botline{
	background-color:#FFFFFF;
	height:3px;
	width:100%;
	position:relative;
}

#footer{
background-color:#2D0101;
	width:100%;
	height:130px;
	position:relative;
}


#navigation_sub{
	position:absolute;
	color:#FFFFFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	left: 557px;
	top: 131px;
	z-index:100;
	width: 474px;
}

#leftColumn2{
	font-size:12px;
	position:relative;
	width:330px;
	float:left;
	margin-left:10px;
}

#centerColumn2{
font-size:12px;
	position:relative;
	float:left;
	width:660px;
	padding-left:10px;
}








-->
</style>
</head>

<body>
    <div id="wrapper"> 
    	<div id="topSec_sub">
    		<div id="logo">My Logo</div>
		  <div id="navigation_sub">Navigation</div>
  		</div>
        <div id="midline"></div>
    	<div id="indexBody">
          <div id="leftColumn2">
            <p class="style1">Left</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><strong>Hello</strong></p>
          </div>
          
          <div id="centerColumn2">Center</div>
        </div>
        <div id="botline"></div>
        <div id="footer"></div>
    </div>
    
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION