Welcome to WebmasterWorld Guest from 54.198.46.95

Forum Moderators: not2easy

Message Too Old, No Replies

CSS: Is space under height: 100%

CSS: Height 100%

     
4:13 am on Aug 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey-

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

4:16 am on Aug 20, 2002 (gmt 0)

5+ Year Member



is it tables or css layout?
4:48 am on Aug 20, 2002 (gmt 0)

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



Madcat, what have you tried?

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

5:03 am on Aug 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, I've tried setting the margin properties on the body element and all of the <div>s in various assortments. I've been testing things I even know wouldn't work (bit late here) in hopes that something would be offset- nuttin.

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.

5:16 am on Aug 20, 2002 (gmt 0)

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



I should think adding padding to the div's would work, if fact, it has too. You might even simplify it by adding padding to the body...

Nick

5:24 am on Aug 20, 2002 (gmt 0)

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



Well, this is fine in Opera, doesn't even do the 100% thing in Moz though, you'll have to test in IE...

<!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

2:59 pm on Aug 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's what I was thinking Nick -thanks- Your example works exactly as it should, but applying the same exact attributes in my code will not unglue the bottom borders to the bottom of the screen for some reason.-

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?

3:48 pm on Aug 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I tried wrapping all of the page elements in a div so I could apply margins or padding to them- but no cigar.
3:57 pm on Aug 20, 2002 (gmt 0)

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



Hmmmm... intriguing problem.

Why not post a very simple example page with the styles in the head so we can mess with it? ;)

Nick

4:24 pm on Aug 20, 2002 (gmt 0)

10+ Year Member



Alas, you can't currently do what you want.

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.

4:49 pm on Aug 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<!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>N/A</title>
<style type="text/css">
body{
margin: 0;
padding: 0 0 40px 0;
background: #69c;
color: #000;
height: 100%;
}

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-

8:57 pm on Aug 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month