Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: not2easy

Message Too Old, No Replies

Content Extends Below Bottom of Container

Fix for one problem creates another

     
4:55 pm on Nov 3, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


In a previous thread, I asked for help with this code to correct a border problem. The solution was to define the parent element height to 100% so the container had something to measure against. That worked fine until I noticed that lengthy content extended below the bottom of the container, as illustrated in the code below. If I remove the html{height: 100%} tag, the container extends properly, but the borders only drop as far as the container content. There must be a simple solution to this, but I cannot figure out what is causing the container to stop where it does. Please help!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
background-color: gray;
}
div.container {
border-left: 10px navy solid;
height: 100%;
}
div.leftlink {
float: left;
background-color: green;
width: 200px;
height: 100%
}
div.linkbar {
background-color: purple;
color: white;
width: 100%;
}
div.main {
border-left: 10px cyan solid;
border-right: 10px lime solid;
margin-left: 200px;
margin-right: 150px;
height: 100%;
background-color: yellow;
}
div#footer {
background-color: red;
height: 20px;
width: 100%;
clear: both;
}
div.rightside {
float: right;
background-color: #008080;
width: 150px;
font-size: 11px;
text-align: center;
height: 100%;
}
</style>
</head>

<body>

<div class="container">
<div class="leftlink">
<div class="linkbar">
Some Links </div>
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
Link 8</div>
<div class="rightside">
<div>Some info here<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
more text down here!
</div>
</div>
<div class="main">
<h2>Some Content Here</h2>
This is the content.</div>
</div>
<div id="footer"></div>
</body>
</html>

10:33 pm on Nov 3, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Basically height:100% means to take the height of the explicitly set height of the parent. The root element is supposed to have the height of the viewport.

So yes it's not going to work as you intend in many cases.

One solution is to use absolute positioning on the main part of the text using the 4 borders (IE6 needs major help to get this done, but it's possible).

Example here: [webmasterworld.com...]
The drawback is that the scrollbar will move from the browser to the div.

The other solution is to have your background (if needed with faux-columns) on the html that you make 100% high of the viewport and use position:fixed on your footer. Next add some padding on your wrapper to make sure it clear the fixed element.
Again IE will need serious help as IE6 doesn't support position:fixed this at all. (IE7.js adds it the capability)

5:23 pm on Nov 4, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Thanks, swa66, I will look at the two solutions provided and see which one works best for my layout. I appreciate the reply :)