Forum Moderators: not2easy
I'm trying to make 2 columns and a footer, centered in the viewport, width height 100% (so footer is always at bottom of page).
the 2 columns are fixed width and they will have to reach from top of page to top of footer.
I've got a great script for height 100% with footer, and columns is no prob, just combining them seems impossible!
script for height 100%:
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>height 100%</title>
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
}
div#viewport {
height: 100%;/* for IE */
min-height: 100%;
margin-bottom: -20px;
background: yellow;
}
html>body #viewport{
height: auto;/* for real CSS browsers */
}
div#marginBottom{
height: 20px;
}
div#footer {
height: 20px;
background: orange;
}
</style>
</head>
<body>
<div id="viewport">
Donec vestibulum aliquet lorem. In eget sem a eros aliquet eleifend. Ut eget tellus. Proin eget lacus. Aenean sagittis lobortis sapien. Duis consequat varius ipsum. Nullam at mi non augue interdu
<div id="marginBottom"></div>
</div>
<div id="footer">20px footer</div>
</body>
</html>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]--></head>
<body>
<div id="header">
Header Here
</div> <!-- closing #header" --><div id="outer">
<div id="clearheader">
<!-- used to make room for the #header -->
</div><div id="left">
<p>sidebar here</p>
</div> <!-- closing #left --><div id="middle">
<p>main content area here</p>
</div> <!-- closing #middle --><div id="clearfooter">
<!-- used to make room for the #footer -->
</div></div> <!-- closing #outer -->
<div id="footer">
Footer Here
</div> <!-- closing #footer --></body>
</html>
main.css
* {
margin:0;
padding:0;
border:none;
z-index:0;
}html, body {
height:100%;
}body {
font-family:arial, sans-serif;
color:#000;
font-size:82%;
background:#CCC;
}#header{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
line-height:100px;
background:#000;
color: #FFF;
font-weight:bold;
text-align:center;}#clearheader {
height:100px;
}#outer{
min-height:100%;
margin-left:200px;
margin-bottom:-100px;
background:#FFF;
}#left {
position:relative;
width:200px;
text-align:center;
float:left;
z-index:100;
margin-left:-199px;
left:-1px;
}#middle {
width:100%;
float:left;
position:relative;
z-index:1;
margin:0 -1px;
}p {
padding:15px 15px 0 15px;
}#clearfooter {
clear:both;
height:115px;
}#footer {
width:100%;
clear:both;
height:100px;
line-height:100px;
background-color:#000;
color: #FFF;
font-weight:bold;
text-align:center;
position:relative;
}
ie.css
(to fix IE issues)#outer {
height:100%;
}#left {margin-right:-3px;
}
Its nice. For the background of the left column you use the background of body, and the background of the middle column you use the background of 'outer'. So I guess this trick won't work when using it in a 3 or 4 column layout, but then again, that was not the topic;-)
Shame the columns themselves are not 100% height. But its the best faking-it I've seen so far.
thank you ever so much
Looks spot on to me.
And at a quick look, I see no problems in setting up multi columns within the main content area.
