PDA

Click to See Complete Forum and Search --> : CSS 100% Height DIV Problem

kwilliams
06-22-2007, 10:01 AM
I found this great tutorial at titled "CSS 100% Height DIV's tutorial" at http://www.webmasterworld.com/forum83/200.htm, which seemed to solve my problem. I'm creating a new site with a three column design, a header, and a footer. When I copied and pasted the code into my page, it worked great in IE6, IE7 and Firefox.

So I then entered code for a header and a footer, and it again worked great in all three browsers. But when I tested it out by entering a bunch of <br />, the footer didn't stay at the bottom of the page.

If anyone can look at the code below, and let me know what I'm doing wrong, it would be greatly appreciated. Thanks for any help.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent Height Divs</title>
<!-- Original code from: http://www.webmasterworld.com/forum83/200.htm -->
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#header {
position:absolute;
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content {
position:static;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

#footer {
position:absolute;
left:0;
background-color:#000;
width:100%;
top:100%;
height:60px;
text-align:right;
color:#FFF;
}

#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>

<body>
<div id="header">
<p>Here is the header: 50px high, no positioning.</p>
</div>
<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.
<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 />
</p>
</div>

<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="footer">
<p>This is the footer.</p>
</div>
</body>
</html>
ryanbutler
06-22-2007, 10:39 AM
A combination of absolute positioning and basing height off of 100%. When you absolutely position everything including the columns and footer, each individual element has no idea where the other exist in the relationship of the document. Additionally, equalizing columns in CSS doesn't work the same way as in tables. Each DIV (left, right or middle) have no idea the other exist and probably don't care. Whereas with tables, with three columns, column height is based off the height of the tallest column.

A better strategy is to the following:


Create a container which holds of the three columns and assign the container a width, such as 760px, with a repeating background image which is dependent on the look and feel of your layout.

Inside the container, nest each of the three columns and float them left. Assign each column a width with all width equaling 760px.

After closing the last column (right), create a footer div and set it to clear both.

Then close your container. This will allow the footer to always stay at the bottom of the layout.


CSS:

container{
width:760px;
margin:20px auto;
}
#header{

}
#left{
float:left;
width:180px;
}
#middle{
float:left;
width:400px;
}
#right{
float:left;
width:180px;
}
#footer{
clear:both
width:760px;
}

HTML:

<body>
<div id="container">
<div id="header">

</div>
<div id="left">

</div>

<div id="middle">

</div>

<div id="right">

</div>

<div id="footer">

</div>
</div>
</body>
kurapica
06-22-2007, 10:54 AM
you use absolute position,in my experience ,It is bad for div+css position!
I share my opinion to your code and solve it.some wrong please point out.Good luck

code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent Height Divs</title>
<!-- Original code from: http://www.webmasterworld.com/forum83/200.htm -->
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
float:left;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content {
float:left;
margin-left:10px;
width:550px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
float:left;
margin-left:10px;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

#footer {
clear:both;
background-color:#000;
width:100%;
top:100%;
height:60px;
text-align:right;
color:#FFF;
}

#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>

<body>

<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="content">
<div id="header">
<p>Here is the header: 50px high, no positioning.</p>
</div>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.
<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 />
</p>
</div>

<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="footer">
<p>This is the footer.</p>
</div>
</body>
</html>
ryanbutler
06-22-2007, 02:07 PM
I have absolutely (no pun intended) what you said in your post. All you changed the was the float. You can't base height like that in your columns, it will never work. You need to re-read my original reply and then take it from there and then ask questions.
kwilliams
06-28-2007, 02:24 PM
Hi ryanbutler,

I used your example code with a few small tweaks to make the columns at 100% height, and this is what I've come up with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Three Columns</title>
<style type="text/css" media="screen">
html {
font-size:62.8%;
margin:0;
padding:0;
height:100%;
}

body {
font-family:arial, helvetica, sans-serif;
font-size:1.2em;
margin:0;
padding:0;
height:100%; /* this is the key! */
color:#000;
background-color:#FFF;
}

#container {
width:auto;
margin:0px auto;
height:100%;
min-height:100%;
}

* html #container {
height:100%;
}
#header {
width:100%;
height:122px;
border:0;
background-color:#FFFF00;
margin:0;
}
#left {
float:left;
width:15%;
background-color:#66FF99;
height:100%;
min-height:100%;
}
#middle {
float:left;
width:70%;
background-color:#FF0000;
height:100%;
}
#right {
float:left;
width:15%;
background-color:#CCCCFF;
height:100%;
min-height: 100%;
}
#footer {
clear:both;
width:100%;
background-color:#000;
color:#FFF;
}
</style>
</head>
<body>
<div id="header">
This is the header
</div>
<div id="container">

<div id="left">
This is the left column
</div>

<div id="middle">
This is the content
<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 />
<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 />
</div>

<div id="right">
This is the right column
</div>
<div id="footer">
This is the footer
</div>
</div>

</body>
</html>

It works well in Firefox and IE 6.0, but when I add the extra page breaks to test the 100% height, the footer no longer appears at the complete bottom of the page. Also, it doesn't appear at the bottom at all in IE 7. If you could let me know what I'm doing wrong, that would be great. Thanks.