Forum Moderators: not2easy
I have a three column layout based on percentages. I've set the body's height value to 100%, but I would like to have about 10px worth of space underneath the three columns.
Everything I try leaves the bottom borders glued to the bottom edge of the screen, how can I make a gap (similar to the outer edges up top and on the sides in u.p.)?
Maybe just a hint ;)
Thanks-
M
I'd start by trying to add a margin to the body, then to the div's if that doesn't cut it...
Possibly padding would be better, what doesn't work?
Nick
I'm thinking that declaring the body height at 100% is preventing the ability to create a gap below those elements. Although I'll lose the effect I'm looking for by removing it.
Nick
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
height: 100%;
padding-bottom: 40px;
}
#mainDiv {
height: 100%;
background-color: #F5F5F5;
border: 1px solid #000000;
}
</style>
<title>100% test</title>
</head>
<body>
<div id="mainDiv"> <p>Here is the div</p>
</div>
</body>
</html>
Nick
I may be able to use the mainDiv as a wrapper div and throw my columns into it.
Is it alright to wrap <div>s within <div>s like that...How much nesting is too much?
Why not post a very simple example page with the styles in the head so we can mess with it? ;)
Nick
height: 100%;
padding-bottom: 40px;
When specified for the body element, you are essentially saying with the above rule is:
"Make the content height of the body element 100% of it's containing block then add 40 pixels of padding on the bottom."
The body element is contained by the root element of the document, in this case the html element. The html element, in turn, is contained by the initial containing block [w3.org]. It is left up to the browser to define how the initial containing block is displayed.
This is an important point. In MSIE 6 and Mozilla 1, the default ('auto') height of the initial containing block is the height of the browser's viewport or the height required by the document's contents, whichever is greater. In Opera, it is simply the height required by the document's contents.
IMHO, the former browsers have the better model, because it theoretically allows you to do what you want like this:
html {
padding-bottom: 10px;
}
body {
height: 100%;
}However, this only seems to work in MSIE 6.
Mozilla ignores the height declaration on the body element when there is no height specified on the html element (which I think is a bug).
Opera makes the body element 100% of the viewport, and then adds 10px to the height.
So, unfortunately, I don't think there is a good answer for this.
p{
font: .8em verdana, helvetica, sans-serif;
color: #fff;
margin: 20px 80px;
}
#left, #center, #right
{
position: absolute;
border: 2px solid #fff;
height: 100%;
}
#left{
left: 0;
width: 20%;
margin: 10px 0 0 10px;
background: #369;
color: #fff;
}
#center{
margin-top: 10px;
left: 21%;
width: 60%;
color: #000;
background: #345 url(../images/latest.png) no-repeat top left;
}
#right{
right: 0;
width: 20%;
margin: 10px 10px 0 0;
background: #369;
color: #fff;
}
</style>
<body>
<div id="left"></div>
<div id="center"><p>Problem creating 10px gap near bottom of the sreeen similar
to the way it is around all other sides.</p></div>
<div id="right"></div>
</body></html>
------------------------------------------
Bare Bones Example:
I thought that I could simply wrap a <div> around the three columns and apply a bottom-margin or padding to the outer <div> to create a gap.
Nick-
body { height: 100%
padding: 40px;
}
Worked until I gave the columns a height of 100%. Of course, this should work because that 100% should be based on it's position parent <div>?
Thanks for all the suggestions-
Alas, you can't currently do what you want.
Grumble.
I believe you're correct. I'll take it another direction.
Thanks for your help-
M
