Fixed header and right column scrolling left column and footer inside 960px wrapper

Hi all, please see the code and show me what I am doing wrong, my goal is to have a position: fixed;, header and position : fixed; right column, the left column and footer will be scrollable, whenever I place the property “fixed” on the header and right column I break the html markup, my original understanding is that all fixed or absolutely positioned elements must come after the scrollable elements, can someone point out what I am doing wrong with the included code, I have moved the elements around up, down and sideways to no avail. Although I am not applying the properties in the following code that are required for the design to allow a fixed header and right column. The example is the most rational of all my iterations, although the right column is not behaving… (And yes, I know, I know just enough to be dangerous) :).


<!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: 0px;
   margin: 0px;
   }
.wrapper{
   margin: 0px auto;
   width: 960px;
   height:100%;
   background-color: aqua
}
.header{

  top:0;
  left:0;
  width: 960px;
  height: 160px;
  background-color: purple
}
.left{
   float: left;
   width: 710px;
   margin-right:710px;
   height: 100%;
   background-color: yellow
}
.right{
	float:right;
	position:fixed;
	top:160px;
	margin-left:-710px;
   width: 240px;
   height: 100%;
   background-color: blue
}
.footer{
	float:left;
   width: 710px;
   margin-right:250px;
   height: 160px;
   background-color: purple
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        header
    </div>

        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>


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:


<!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:


<!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.

Paul, first, brilliant, this is not your father’s css, I will be going through the css stickies in your signature and reviewing the code, later, I may come back with some slightly annoying questions, ;), 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.

Dave