View Full Version : XHTML strict, divs 100% height

08-21-2010, 07:02 PM
how to make those divs stretch 100% in height?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My page title</title>

<div style="width:600px; height:150px; background-color:red;">TOP</div>
<div style="width:600px; background-color:yellow;">MIDDLE</div>
<div style="width:600px; height:20px; background-color:blue;">BOTTOM</div>


The reaper
08-21-2010, 08:57 PM

just as a suggestion, you might want to add the colors and styles to a css file so you could use it throughout your site (if you want it to show more than once) instead of having to code each one.

What exactly are you trying to accomplish? All I see here are three different sized and color boxes.

changing this:

width:600px; height:150px;

to this:

width:600px; height:100%;

will have the box automatically adjust to the height depending on the amount of content.

08-21-2010, 09:12 PM

I would like to have three divs (top, middle and bottom) that are 100% in height of browser window.

Top and bottom divs are set to 150 and 20px.

height:100%; is not working

The reaper
08-21-2010, 11:27 PM
So you want to have three divs cover the entire browser page? I'm confused by the part "100% in height of browser window"?

08-22-2010, 10:23 AM
So you want to have three divs cover the entire browser page?

08-22-2010, 12:03 PM
You'd need to use faux columns, see http://www.alistapart.com/articles/fauxcolumns/