homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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

CSS Forum

    
CSS 100% Height DIV's tutorial [Continued]
bwg1974




msg:1201343
 1:12 am on Mar 22, 2003 (gmt 0)

continuing from thread: [webmasterworld.com ]

Nick_W had last posted with an attempt at providing a header with 100% div left and right columns. unfortunately it was not quite good enough IMO. Here's my own 1-minute crack at it. Limitation is overlapping borders.

The technique can be extended for a footer as well.

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>One Hundred Percent height Divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
z-index: 100;
}
#left {
position:absolute;
left:0;
top:0;
padding-top:50px;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
z-index: 10;
}
.content {
position: relative;
top: 50px;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top:0;
padding-top:50px;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
z-index: 10;
}

#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>

<body>

<div id="header">
<p>Here is the header: 50px high, no positioning.</p>
</div>

<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>

</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>
</div>

</body>
</html>

 

DrDoc




msg:1201344
 1:29 pm on Mar 22, 2003 (gmt 0)

Welcome to Webmaster World!

Thanks for your added insight... I'm sure Nick didn't mean that his suggestion is the best/only way to do it. In fact, it is quite difficult to create 100% height cross-browser.

You mention Opera in your post... Then I'm sure you're familiar with Opera's problem with 100% height. No matter what you do, 100% is never 100% in Opera. It is merely "100% - 3 pixels". Of course this can be solved with adjusted margins, but then the layout will break in other browsers. It gets even worse if one element has padding (which Opera adds to the 100% height... still 3 pixels off though!).

Also, <?xml version="1.0" encoding="iso-8859-1"?> will cause the page to break in IE6/Win. Maybe not in a simple layout like the one above, but when several elements, each with its own height/margin/padding, are added.

May I also point out that units should always be specified, even if the value is zero! Most browsers are quite forgiving, but the units should be there, according to W3C's recommendations. Hence, "0" should be "0px", just to ensure that stricter browsers get it right. Gecko/Opera already will not interpret "0" as "0px" all the time. Sometimes the value is ignored, sometimes it's rendered as "null" (which is quite different from zero).

However, I disagree with the statement that 100% only works if the parent element is assigned a value. All values, if not explicitly assigned, will receive their default values. For example, body width is always 100%. Body height, however, is a bit tricky. The body doesn't have a height, unless specified. And, even if specified, it will expand to fit the content (unless the content height has a percentage value). Therefore, the height is "fluid". Any browser that correctly interprets heights should therefore be able to handle "100%", without an assigned height for the body. This can be demonstrated by setting heights such as "200px", 3589px", or a value that exactly matches the inner height of the window (which works even in Opera).

However, as pointed out, in most browsers it will not work, unless the body is assigned a height. Hence, the above example will adjust for browser incapabilities, which I thank you for.

I hope this explanation gives added insight to anyone who wonders why your example would often work "better" than the example given by Nick. :)

ciml




msg:1201345
 4:21 pm on Mar 22, 2003 (gmt 0)

DrDoc, you had me worried. I've only read CSS2 once so I thought the "zero units" thing had changed.

[w3.org...]
After the '0' length, the unit identifier is optional.

I have some vague memory of an IE3.0 bug with "0" values, but I can't find it now.

bwg, WinIE5.0 seems to get the header wrong. It's 440 pixels short, presumably due to "margin-left:220px;" and "margin-right:220px;" in .content

This is fixed if .header has "position: relative;" and .content looses "top: 50px; " but I don't know if that would cause problems elsewhere.

securecat




msg:1201346
 6:41 am on Mar 23, 2003 (gmt 0)

>I have some vague memory of an IE3.0 bug with "0" values, but I can't find it now.

It is the problem generated in `line-height` property.
The "0" is not bad and the unitless number is related.
`line-height` property permits an unitless number. However, IE3 will regard it as px, if there is no unit.

For example, there is the following CSS:

p { 
line-height:1.2;
}

IE3 interprets this valid CSS as follows:

p { 
line-height:1.2px;
}

Therefore, if the document with which this CSS was applied is opened by IE3, all texts will overlap and will be displayed.

In order to avoid this bug, we were made to surely give the unit to value. However, since concern does not already have me in IE3, the unit will not be given if unnecessary.

securecat




msg:1201347
 6:52 am on Mar 23, 2003 (gmt 0)

>May I also point out that units should always be specified, even if the value is zero!

I do not think so. This value is the length. What is necessary is to give the unit, only when required.

By any specification, it is defined as optional.
After a zero length, the unit identifier is optional.

[w3.org...]
[w3.org...]
[w3.org...]
[w3.org...]

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved