Sent by Alec A. Lazarescu on 1 March 2006 18:06
I'd like a header, a left bar with a fixed width of 165 and 100% height,
a content area with width the remaining window width 100% and height
100% and a content footer (only on bottom of content, not the whole
bottom with the left bar).
With height 100% I'm having a problem with a vertical scrollbar
appearing for no reason and with width 100% on the content, it's going
to the next line instead of using 100%-165 to take up the full remaining
space. The content footer is also not going to the bottom.
This is frustrating...
<!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" >
<body>
<head>
<title>Untitled Page</title>
<style>
html,body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
#header {background-color: red}
#left {background-color: gray; width: 165px;}
#content {background-color: blue; width: 100%}
#footer {background-color: green}
DIV.clear
{
clear: both;
float: none;
height: 0px;
width: 0px; /* needed to prevent overflow expand on IFRAME shim hack
of RadMenu */
overflow: hidden;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="left" style="float: left; margin: 0px; padding: 0px;
height: 100%">
<div id="leftnavcontainer" style="float: left;">
<div style="float: left">
Some stuff in left
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
<div id="content" style="float: left; height: 100%">
<div style="float: left">
Content</div>
<div id="footer" style="clear: both">
Content only footer</div>
</div>
<div class="clear">
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
