Forum Moderators: not2easy
What I am having trouble with is making the height of the left colum extend down to fill 100% of the space to the footer. I have a achieved this in FF, Opera, IE7... but not IE6.
With IE6, the div ends when the content ends.
Anyone know the CSS to get CSS to comly?
My CSS: (code for navigation div in red)
body {
margin: 0;
padding: 0;
text-align: center;
min-width: 965px;
background-color: #c0c0c0;
color: white;
font: small arial, helvetica, verdana, sans-serif;
}
#wrapper {
text-align: left;
width: 965px;
margin-left: auto;
margin-right: auto;
}
#header-wrapper {
width: 100%;
height: 125px;
background-color: #000000;
}
#main-wrapper {
width: 100%;
background-color:#969696;
position: relative;
}
#body-wrapper {
margin: 0 25px 0 250px;
height: 100%;
}
#footer-wrapper {
width: 100%;
background-color:#808080;
}
#logo-wrapper {
position: relative;
height: 100%;
}
#logo {
position: absolute;
top: 25px;
left: 0;
width: 250px;
height: 100px;
background-color: #FFFFFF;
color:#000000;
}
#navigation-wrapper {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #000000;
}
#navigation {
position: relative;
padding: 10px 0 10px 0;
height: 100%;
min-height: 100%;
}
#body-header {
position: absolute;
top: 0px;
left: 250px;
background-color: #c0c0c0;
width: 690px;
height: 25px;
}
#body {
background-color: #FFFFFF;
height: 100%;
color: #000000;
padding: 10px;
display: inline-block;
}
#footer {
position:relative;
padding: 10px;
}
#shading1 {
position: absolute;
left: 250px;
top: 0px;
width: 715px;
height: 100px;
background-color:#808080;
}
#shading2 {
width: 690px;
height: 25px;
position: relative;
top: 100px;
left: 250px;
background-color:#969696;
}
#shading3 {
width: 25px;
height: 25px;
position: relative;
top: 0px;
left: 690px;
background-color: #808080;
}
My HTML:
<!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" />
<title>Untitled Document</title>
<link href="css/master_page.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script id="PLVIMScript" language="JavaScript" src="Pluginlab/Scripts/PLVIM.js">/* PLVIMMenu script */</script>
</head>
<body onload="PLVIM_onload()">
<div id="wrapper">
<div id="header-wrapper">
<div id="logo-wrapper">
<div id="logo"><img src="images/logo.gif" alt="Jaxon Design Studio - Art & Interior Design" width="250" height="100" /></div>
<!-- logo -->
<div id="shading1"></div>
<div id="shading2"></div>
</div> <!-- logo-wrapper -->
<div id="header-box1">
</div> <!-- header-box1 -->
</div> <!-- header-wrapper -->
<div id="main-wrapper">
<div id="navigation-wrapper">
<div id="navigation">
<p> </p>
<div id="PLVIMDiv" style="width:125px;height:60px" dir="ltr">
<table id="PLVIMMenu" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="PLVIMLink" style="font-family:Arial,Helvetica,sans-serif;font-size:15px" background="images/but_brdr_blk_a.gif" width="125px" height="20px"><div style="padding:1px 0px 1px 6px" nowrap="nowrap"><a style="color:#525552;text-decoration:none" href="#">Profile</a></div></td>
</tr>
<tr>
<td id="PLVIMLink" style="font-family:Arial,Helvetica,sans-serif;font-size:15px" background="images/but_brdr_blk.gif" width="125px" height="20px"><div style="padding:1px 0px 1px 6px" nowrap="nowrap"><a style="color:#525552;text-decoration:none" href="#">Evidence</a></div></td>
</tr>
<tr>
<td id="PLVIMLink" style="font-family:Arial,Helvetica,sans-serif;font-size:15px" background="images/but_blk.gif" width="125px" height="20px"><div style="padding:1px 0px 1px 6px" nowrap="nowrap"><a style="color:#525552;text-decoration:none" href="#">Contact</a></div></td>
</tr>
</table>
</div>
</div>
<!-- navigation -->
</div> <!-- navigation-wrapper -->
<div id="body-wrapper">
<div id="shading3"></div>
<div id="body-header"></div>
<div id="body">
Body Content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div> <!-- body -->
</div> <!-- body-wrapper -->
</div> <!-- main-wrapper -->
<div id="footer-wrapper">
<div id="footer">
Footer
</div> <!-- footer -->
</div> <!-- footer wrapper -->
</div> <!-- wrapper -->
</body>
</html>
[edited by: encyclo at 6:46 pm (utc) on Dec. 7, 2006]
[edit reason] no personal URLs please, see forum charter [/edit]
There are a few solutions that you can do here. Change the background color of your #main wrapper to #000 and make it a "faux" column.
Or you need to give a min-height of 100% to the containers that have a height of 100%. I think that IE6 doesn't understand the 100% height, but understands min-height: 100% as the same as height: 100%.
Let us know how it progresses!
Happy coding.
[edit]Oh, and there's a TOC rule that says you cannot post links for the reason that they may not exist later on, when this thread is searched by someone a few months from now...[/edit]
Also, you should check out this thread:
[webmasterworld.com...]
Why most of us should NOT use XHTML.
[edited by: Fotiman at 9:31 pm (utc) on Dec. 7, 2006]
I would love to ditch absolute posiotioning, but I dont know how to create it without it... I'll keep playing. Im new at this.
Thanks again, and sorry for posting a link.
A better solution might simply be to move away from absolute positioning.
Do you also have any suggestions on how to go around the position: absolute?
I'm having the same problem. And I really have NO idea on how to fix this.
Please?..
You might check out the Yahoo UI Library's Grid Layout. Makes it easy.
