Posted: Tue Dec 09, 2008 5:24 am 100% height, fixed width, centered with footer at bottom
This is for those that don't have a lot of content but want the layout to fill the viewport vertically. One image will have to be created to make the left column look like it extends to the bottom. Content that exceeds the viewport height will push the footer down. Have fun!
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>2 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center; /* for ie6 and under */
min-width:760px;/* for mozilla*/
background-color: #F2E3EE;
color: #000000;
}
#outer{
min-height:100%;
width:758px; /* add 2px if borders are not used */
border-left:1px solid #000;
border-right:1px solid #000;
color: #000000;
text-align:left;
margin:auto;
position:relative;
background:pink url(images/blackbg3.gif) repeat-y left top;
/* The background image needs to be the same width as the #left div. The one I used is 138px X 9px */
}
* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
#header{
min-height:70px;
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
position:relative;
}
* html #header{height:70px}
#left {
position:relative;/*ie needs this to show float */
width:136px;
float:left;
color:#fff
}
#left p {padding:2px}
#footer {
width:758px; /* add 2px if borders are not used on the #outer div */
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
left:0;
bottom:0;
position: absolute;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
margin-bottom:-1px;
}
div,p {margin-top:0}/*clear top margin for mozilla*/
#centrecontent {
width:622px;
float:right;
}
#centrecontent p {padding-left:3px}
#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
</style>
</head>
<body>
<div id="outer">
<div id="header">
<p>Header - No column longest - footer at bottom of window.</p>
</div>
<div id="centrecontent">
<!--centre content goes here -->
<p>Centre Content goes here : Centre Content goes here : Centre Content goes
here : Centre Content goes here : Centre Content goes here : Centre Content
goes here : Centre Content goes here : Centre Content goes here : Centre
Content goes here : Centre Content goes here : Centre Content goes here
: Centre Content goes here : </p>
<p>Centre Content goes here : Centre Content goes here : Centre Content goes
here : Centre Content goes here : Centre Content goes here : Centre Content
goes here : Centre Content goes here : Centre Content goes here : Centre
Content goes here : Centre Content goes here : Centre Content goes here
: Centre Content goes here : end </p>
</div>
<div id="left">
<p>Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : end</p>
</div>
<div id="clearfooter"></div>
<!-- ie needs this -->
<div id="footer">Footer - | |- Footer </div>
</div>
<!-- end outer div -->
</body>
</html>
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
