homepage Welcome to WebmasterWorld Guest from 54.227.5.234
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS: Is space under height: 100%
CSS: Height 100%
madcat




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

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

 

Vanessa




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

is it tables or css layout?

Nick_W




msg:1206780
 4:48 am on Aug 20, 2002 (gmt 0)

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

madcat




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

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.

Nick_W




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

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

Nick_W




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

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

madcat




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

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?

madcat




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

I tried wrapping all of the page elements in a div so I could apply margins or padding to them- but no cigar.

Nick_W




msg:1206786
 3:57 pm on Aug 20, 2002 (gmt 0)

Hmmmm... intriguing problem.

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

Nick

moonbiter




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

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.

madcat




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

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

madcat




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved