Division height problem

Twilightmama · Dec 6, 2002

I have a template here that I'm working with...

http://www.cyberhabitats.com/NP/divisions.html

. In IE6, the right hand column, represented by the dark gray block, increases it's height as more text is added to the left hand column. This is the way it is suppose to look. But in Netscape 7, the right hand column never budges and it looks really strange to have a long left hand column and a really short right hand column. Here is my code. Does anyone know how to correct this? Thanks.

Kim

<head>
<title>Untitled</title>
</head>
<style type="text/css">
body {
background-color : #000040;
background-position : top left;
margin: 50px 0px 50px 50px;
font-size: 13px;
font-family: arial, verdana;
line-height: 22px;
color: #333;
}

h1 {color: #000040; text-align:left;font-size:16px;}

p{ margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: left;}

#main{

visibility: visible;
width: 700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #ffffff;
border-top: 1px solid #F3F4FF;
border-right: 1px solid #F3F4FF;
border-left: 1px solid #F3F4FF;
border-bottom: 1px solid #F3F4FF;
color:#333;
}

#header {width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: red;
border: 0px 0px 0px 0px;
height: 99px;
}

#addressbar {width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 15px;
background-color: blue; }

#links {width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-bottom: 1px solid #000040;
height: 20px;
background-color: green;}

#content {position: relative;
width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
height: 350px;
background-color: pink;
overflow: visible;
}

#leftcol {position: relative;
float: left;
width:450px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;

background-color: #ffffff;

}

#rightcol{
overflow: visible;
float: right;
width:250px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
height: 100%;
background-color: #333333;
}

#textlinks {position: relative;
width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
height: 15px;
background-color: gray;
}

#webdesign {position: relative;
width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
height: 15px;
background-color: orange;
}

#footer {position: relative;
width:700px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
height: 40px;
background-color:yellow;
}

</style>
<body>

<div id="main">
<div id="header"></div>
<div id="addressbar"></div>
<div id="links"></div>
<div id="content">
<div id="leftcol"><p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div id="rightcol"></div>
</div>
<div id="textlinks"></div>
<div id="webdesign"></div>
<div id="footer"></div>
</div>

</body>

jpbrassard · Dec 6, 2002

Try inserting a non-breaking space code in the div, like so:

Code:

<div id=&quot;rightcol&quot;>&nbsp;</div>

I've absolutely no experience with NS7, but that could be the culprit.

Hope that helps,
jp

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Division height problem

Twilightmama

Technical User

jpbrassard

Programmer

Similar threads

Part and Inventory Search

Sponsor