...

View Full Version : Difficulty getting columns to touch bottom of screen



Tristan Gray
07-18-2005, 03:58 PM
I am trying to create a layout similar to this:
http://www.creda.net/~jfcliffs/idealdesign.jpg


But the problem is the boxes will not extend to the bottom of the page even with height: 100% and no parent element that they could be inheriting a limited height from. I finally got the three columns to align properly with auto margins but I just don't know how to get these damned boxes to take up the full height of the screen.

Thank you in advance, I could post code but there is little point as it is just 3 divs with no padding/borders/content/margins.

Pepe, the bull
07-18-2005, 04:06 PM
Did you set the padding and margins of the body element to zero?

Tristan Gray
07-18-2005, 04:11 PM
yes. When I set the height: 100% value it simply does nothing at all to each box.

The CSS file


body
{
background-color: #666699;
margin: 0px;
padding: 0px;
}

#left
{
float: left;
height: 100%;
width: 100px;
margin: 0px;
padding: 0px;
background-color: #333366;
}

#right
{
float: right;
height: 100%;
width: 100px;
margin: 0px;
padding: 0px;
background-color: #333366;
}

#middle
{
margin: 0px auto 0px auto;
padding: 0px;
height: 100%;
width: 600px;
background-color: #333366;
}



The HTML File


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="welcome.css" rel="stylesheet" type="text/css">
<title>Welcome to the Joggins Fossil Cliffs - Please Choose a Language
</title>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="middle">
Where does this go?
</div>

</body>
</html>


Now I know that this will leave space between the boxes and for now that is ok. I will probably instead use a single box with a div inside for the image for simplicity's sake but I am just messing around a bit.

Tristan Gray
07-18-2005, 04:22 PM
Well, I solved my own problem. When using a full-height setting for a div element even if it has no particular parent it does not assume that 100% means 100% of the window. You need to specify in the body section of your css that height: 100%. Then the divs will inherit that and their 100% will equal 100% of the screen.

_Aerospace_Eng_
07-18-2005, 05:14 PM
You'll need to set the html to 100% height to in order to work in FF.

html, body {
margin:0;
padding:0;
height:100%;
}

Tristan Gray
07-18-2005, 05:29 PM
Yeah, I found that out too but never bothered updating since nobody else seemed concerned with this thread.

Pepe, the bull
07-18-2005, 05:36 PM
I was just kicking myself trying to figure it out for my page. Thank you. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum