SteveDingle
Programmer
Heya All,
Still working on non-table CSS layout. I slapped together the following code based on code at Dougls Livingston's site ( which gives me a header, footer and 3 columns. However I'm hoping for a bit more but maybe I'm being to greedy...
I would like the Left, Middle and Right columns to "push" the footer to the bootom of the page regardless of content. I very rarely will have enought text to "fill" a page but don't realy like alot of empty whitespace at the bottom.
My hope is to do this without tables or Javascript (read somewhere else that you shouldn't rely on javascript in case user have turned off)
If not possible. fair enough, but thought I would ask before spending days searching around for something not possible.
Thanks!!!!!!
Toodles,
Steve Dingle
D&S Business Solutions Ltd
Still working on non-table CSS layout. I slapped together the following code based on code at Dougls Livingston's site ( which gives me a header, footer and 3 columns. However I'm hoping for a bit more but maybe I'm being to greedy...
I would like the Left, Middle and Right columns to "push" the footer to the bootom of the page regardless of content. I very rarely will have enought text to "fill" a page but don't realy like alot of empty whitespace at the bottom.
My hope is to do this without tables or Javascript (read somewhere else that you shouldn't rely on javascript in case user have turned off)
If not possible. fair enough, but thought I would ask before spending days searching around for something not possible.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
margin: 0 0;
padding: 0 0;
}
#ContainerMain {
border: 1px solid black;
margin: 0 -1px;
min-width: 400px;
padding: 0 0;
width: 100%;
}
#Header{
background: yellow;
height: 120px;
padding: 0 0;
position: relative;
width: 100%;
z-index: 4;
}
#Footer{
background: green;
height: 30px;
padding: 0 0;
position: relative;
width: 100%;
z-index: 4;
}
#ContainerColumns {
border-left-width: 150px; /* left column width */
border-left-color: #FFFFC6; /* left column colour */
border-left-style: solid;
background-color: white; /* center column colour */
border-right-width: 50px; /* right column width */
border-right-color: #FFFFC6; /* right column colour */
border-right-style: solid;
width: auto;
}
#ContainerInner {
margin: 0;
width: 100%;
}
#ColumnLeft{
float: left;
margin-left: -150px;
position: relative;
width: 150px;
z-index: 1;
}
#ColumnMiddle{
float: left;
position: relative;
width: 100%;
z-index: 3;
}
#ColumnRight{
float: left;
margin-right: -50px;
position: relative;
width: 50px;
z-index: 2;
}
#ColumnClear{
clear: both;
}
</style>
</head>
<body>
<div id="ContainerMain">
<div id="Header">
Header
</div>
<div id="ContainerColumns">
<div id="ContainerInner">
<div id="ColumnLeft">
<p>
Left
</p>
</div> <!-- id="ColumnLeft" -->
<div id="ColumnMiddle">
<p>
Middle
</p>
</div> <!-- id="ColumnMiddle" -->
<div id="ColumnRight">
<p>
Right
</p>
</div> <!-- id="ColumnRight" -->
<div id="ColumnClear">
</div> <!-- id="ColumnClear" -->
</div> <!-- id="ContainerInner" -->
</div> <!-- id="ContainerColumns" -->
<div id="Footer">
Footer
</div>
</div> <!-- id="ContainerMain" -->
</body>
</html>Thanks!!!!!!
Toodles,
Steve Dingle
D&S Business Solutions Ltd
baby steps for me for now, I was actually just previewing in Homesite 5.5.