Scriptdaemon
05-31-2009, 01:55 AM
I have a three column layout, and I can't quite figure out how to force the columns' heights to reach the bottom of the page so they blend seamlessly with the footer. The footer is stuck to the bottom of the page, and as the content overlaps the viewport the footer follows, but if the content of the page is less than the viewport, the columns don't expand 100% and leave a large gap.
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" xml:lang="en-US">
<head>
<title>Sciptdaemon</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
<a href="#" title="Back to home">Scriptdaemon</a>
</h1>
<!-- Navigation bar start -->
<div id="navbar">
<form action="#" id="login" method="post">
<fieldset>
<label for="email">Email:</label>
<input id="email" type="text" />
<label for="password">Password:</label>
<input id="password" type="password" />
<input type="submit" value="Log in" />
</fieldset>
</form>
</div>
<!-- Navigation bar end -->
</div>
<div id="content">
<div id="colmid">
<div id="colleft">
<div id="col1">
<!-- Middle column start -->
<h2>To Do</h2>
<ol>
<li>[bug] Set 100% column height;</li>
<li>[feature] Add navigation tabs;</li>
<li>[feature] Add breadcrumb navigation;</li>
<li>[feature] Add print stylesheet;</li>
<li>[feature] Add error pages;</li>
<li>[feature] Add text-only sitemap;</li>
<li>[feature] Add extended footer;</li>
<li>[feature] Add password confirmation script;</li>
<li>[test] Shorten line lengths to 45-60 characters;</li>
<li>[test] Adjust page width;</li>
<li>[test] Add page borders;</li>
</ol>
<!-- Middle column end -->
</div>
<div id="col2">
<!-- Right column start -->
<h2>Header</h2>
<p>Content</p>
<!-- Right column end -->
</div>
<div id="col3">
<!-- Left column start -->
<h2>Header</h2>
<p>Content</p>
<!-- Left column end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 Scriptdaemon</p>
</div>
</div>
</body>
</html>
CSS:
html,body {
border:0;
font-family:arial,helvetica,sans-serif;
font-size:small;
height:100%;
margin:0;
padding:0
}
body {
min-width:600px;
width:100%
}
h1,h2 {
color:#ffa500;
margin:.8em 0 .2em;
padding:0
}
h1 {
font:1.5em georgia,"times new roman",serif
}
h2 {
font:700 1.25em georgia,"times new roman",serif
}
p {
line-height:1.5;
margin:.4em .6em .8em;
padding:0
}
input {
background:#fff;
border:1px solid #808080;
color:#666;
font-size:.8em;
width:10em
}
input[type="submit"] {
background:#eee;
border:1px solid #000;
color:#666;
width:4.5em
}
img {
border:0
}
a {
color:#ffa500
}
div#container {
height:auto;
margin:0 auto;
min-height:100%;
position:relative
}
div#header {
background:#eee;
border-bottom:6px double #808080;
color:#ffa500;
width:100%
}
div#header h1 {
margin:0;
padding:.4em 15px
}
div#header a {
text-decoration:none
}
div#navbar {
background:#ddd;
border-top:4px solid #000;
color:#000;
font-weight:700;
margin:0;
padding:6px 15px;
text-align:right
}
div#navbar form {
padding:1px 0
}
div#navbar fieldset {
border:0;
padding:0;
margin:0
}
div#content {
background:#eee;
color:#000;
overflow:hidden;
width:100%
}
div#colmid,div#colleft {
float:left;
position:relative;
width:100%
}
div#colmid {
background:#fff;
border-right:2px solid #808080;
color:#666;
right:25%
}
div#colleft {
background:#eee;
border-right:2px solid #808080;
color:#000;
right:50%
}
div#col1,div#col2,div#col3 {
float:left;
overflow:hidden;
padding:0 0 3em;
position:relative
}
div#col1 {
background:#fff;
color:#666;
left:102%;
width:46%
}
div#col2 {
left:31%;
width:21%
}
div#col3 {
left:85%;
width:21%
}
div#footer {
background:#ddd;
border-bottom:4px solid #000;
border-top:6px double #808080;
bottom:0;
color:#666;
position:absolute;
text-align:center;
width:100%
}
div#footer p {
margin:0;
padding:6px 15px
}
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" xml:lang="en-US">
<head>
<title>Sciptdaemon</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
<a href="#" title="Back to home">Scriptdaemon</a>
</h1>
<!-- Navigation bar start -->
<div id="navbar">
<form action="#" id="login" method="post">
<fieldset>
<label for="email">Email:</label>
<input id="email" type="text" />
<label for="password">Password:</label>
<input id="password" type="password" />
<input type="submit" value="Log in" />
</fieldset>
</form>
</div>
<!-- Navigation bar end -->
</div>
<div id="content">
<div id="colmid">
<div id="colleft">
<div id="col1">
<!-- Middle column start -->
<h2>To Do</h2>
<ol>
<li>[bug] Set 100% column height;</li>
<li>[feature] Add navigation tabs;</li>
<li>[feature] Add breadcrumb navigation;</li>
<li>[feature] Add print stylesheet;</li>
<li>[feature] Add error pages;</li>
<li>[feature] Add text-only sitemap;</li>
<li>[feature] Add extended footer;</li>
<li>[feature] Add password confirmation script;</li>
<li>[test] Shorten line lengths to 45-60 characters;</li>
<li>[test] Adjust page width;</li>
<li>[test] Add page borders;</li>
</ol>
<!-- Middle column end -->
</div>
<div id="col2">
<!-- Right column start -->
<h2>Header</h2>
<p>Content</p>
<!-- Right column end -->
</div>
<div id="col3">
<!-- Left column start -->
<h2>Header</h2>
<p>Content</p>
<!-- Left column end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 Scriptdaemon</p>
</div>
</div>
</body>
</html>
CSS:
html,body {
border:0;
font-family:arial,helvetica,sans-serif;
font-size:small;
height:100%;
margin:0;
padding:0
}
body {
min-width:600px;
width:100%
}
h1,h2 {
color:#ffa500;
margin:.8em 0 .2em;
padding:0
}
h1 {
font:1.5em georgia,"times new roman",serif
}
h2 {
font:700 1.25em georgia,"times new roman",serif
}
p {
line-height:1.5;
margin:.4em .6em .8em;
padding:0
}
input {
background:#fff;
border:1px solid #808080;
color:#666;
font-size:.8em;
width:10em
}
input[type="submit"] {
background:#eee;
border:1px solid #000;
color:#666;
width:4.5em
}
img {
border:0
}
a {
color:#ffa500
}
div#container {
height:auto;
margin:0 auto;
min-height:100%;
position:relative
}
div#header {
background:#eee;
border-bottom:6px double #808080;
color:#ffa500;
width:100%
}
div#header h1 {
margin:0;
padding:.4em 15px
}
div#header a {
text-decoration:none
}
div#navbar {
background:#ddd;
border-top:4px solid #000;
color:#000;
font-weight:700;
margin:0;
padding:6px 15px;
text-align:right
}
div#navbar form {
padding:1px 0
}
div#navbar fieldset {
border:0;
padding:0;
margin:0
}
div#content {
background:#eee;
color:#000;
overflow:hidden;
width:100%
}
div#colmid,div#colleft {
float:left;
position:relative;
width:100%
}
div#colmid {
background:#fff;
border-right:2px solid #808080;
color:#666;
right:25%
}
div#colleft {
background:#eee;
border-right:2px solid #808080;
color:#000;
right:50%
}
div#col1,div#col2,div#col3 {
float:left;
overflow:hidden;
padding:0 0 3em;
position:relative
}
div#col1 {
background:#fff;
color:#666;
left:102%;
width:46%
}
div#col2 {
left:31%;
width:21%
}
div#col3 {
left:85%;
width:21%
}
div#footer {
background:#ddd;
border-bottom:4px solid #000;
border-top:6px double #808080;
bottom:0;
color:#666;
position:absolute;
text-align:center;
width:100%
}
div#footer p {
margin:0;
padding:6px 15px
}