Hi,
Before I explain where you went wrong please read the CSS FAQ on the sticky footer and on the 100% height as you need an understanding of the techniques used in those layouts in order to make this work.
The basics of your code are this:
Code:
<!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>
<title>header footer right col fixed, left scrollable</title>
<style type='text/css'>
html, body {
padding: 0;
margin: 0;
}
.wrapper {
margin: 0px auto;
width: 960px;
background-color: aqua
}
.header {
top:0;
width: 960px;
height: 160px;
background-color: purple;
position:fixed;
}
.left {
float: left;
width: 710px;
background-color: yellow;
padding-top:160px;
min-height:200px;
}
.right {
float:right;
width:240px;
}
.right-inner {
position:fixed;
top:160px;
width: 240px;
background-color: blue;
min-height:200px;
}
.footer {
float:left;
width: 710px;
height: 160px;
background-color: purple;
clear:both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"> header </div>
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<div class="right-inner"> right</div>
</div>
<div class="footer"> footer </div>
</div>
</body>
</html>
You can't use height:100% apart form placing on html and body. If you place it on any other element then you either contain the height to:100% and the element won't grow (just as if you had said height:200px) or the height just collapses to auto. It collapses to auto because percentage heights can only base their height on a parent that has a height defined and not one who's height is dictated by content.
If you are positioning fixed elements inside a fixed width layout then you can't use left or right because fixed elements are always positioned from the viewport and not the container they are currently situated. You first have to position a normal element in the right place and then on an inner element set the position:fixed and let its co-ordinates be auto (apart from top or bottom where necessary).
Fixed elements that go below the fold of the page cannot be reached therefore you cannot let this happen and must set up scrollbars in case this happens.
I'm guessing that you were looking for a sticky footer approach with a full length sidebar and you would need to do it like this:
Code:
<!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>
<title>header footer right col fixed, left scrollable</title>
<style type='text/css'>
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
h1, h2, p {
padding:0 10px;
margin:0 ;
}
.wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html,body {
padding: 0;
margin: 0;
height:100%;/* the only place you can really use height:100%*/
}
.wrapper {
margin: -160px auto 0;
width: 960px;
min-height:100%;
background-color:yellow;
clear:both;
}
.header {
top:0;
width: 960px;
height: 160px;
background-color: purple;
position:fixed;
}
.left {
float: left;
width: 740px;
/* background-color: yellow;*/
padding-top:320px;
}
.right {
float:right;
width:240px;
}
.right-inner {
position:fixed;
width: 240px;
background-color: blue;
overflow:auto;
top:160px;
bottom:0;
}
.footer-wrap {
clear:both;
width:960px;
margin:auto;
height:160px;
}
.footer {
width: 740px;
height: 160px;
background-color: purple;
}
/* no IE6 support */
</style>
</head>
<body>
<div class="wrapper">
<div class="header"> header </div>
<div class="left">
<p>left start</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<div class="right-inner"> right start</div>
</div>
</div>
<div class="footer-wrap">
<div class="footer"> footer </div>
</div>
</body>
</html>
Read the CSS FAQ on the sticky footer (see my sig) to understand how a sticky footer works as it is slightly complicated.
.
Reply With Quote
, certainly within the css there is some unexpected code, some coding I have never seen, but thanks for the helping hand, this has really helped move the project along.
Bookmarks