Twilightmama
Technical User
I have a template here that I'm working with... . 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>
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>