homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

px or % on CSS heights?

 3:06 pm on Aug 9, 2002 (gmt 0)

I have a page that looks the same in NN6.2 and IE5.5. I went home and viewed in MSN and IE 6.0 and they both display the page with the height of my divs stopping were my text ends.

My CSS has those divs set to 80%. Is the default 100% if it is undeclated or would it help if I set the height to 100% for the body (as the body is the containing element).

Or is it best to set my heights in px?



 3:31 pm on Aug 9, 2002 (gmt 0)

Check this thread out:


No, default will not be 100% - it will default to auto.


 4:00 pm on Aug 9, 2002 (gmt 0)


That fixed IE, now NN6.2 is wiggin on me. I have two divs, parent is body (height 100%). both divs have a height of 80%. The left div displays correctly, the right div is displaying only to the size of the text it contains and it has a floating div that is outside its parent div.

here is the code

body {
margin: 0;
font:14px arial;


border:1px solid #048;
margin: 0 5px 0 154px;

border-right:1px dotted #048;
border-bottom:1px dotted #048;
margin:0 10px 10px 0;


 4:15 pm on Aug 9, 2002 (gmt 0)

The answers, and there are several depending on perspective, first require clarification of the intended element's usage. In this case, <div>'s are implied. Are the <div>'s used solely as containers for content? Or do they also provide graphic attributes?

Percentages work, but can be tricky. Using .px or auto (undeclared default) may provide the best solution depending on the desired result.

If you are trying to use <div>'s as combination containers and display elements (colored sidebars for example), and wish to have a background image/color display full length regardless of the actual content, then (some-value%) will work as long as the parent container's height is available for reference e.g. body {height:100%;}

You may find (through testing) that values greater than 100% are needed to diplay your sidebars as desired. If normal page flow is used elswhere on the page, content may "push past" your 100% height sidebars. Testing, as always, is required.

Are you referring to the #main <div>?
Try giving it a starting point of reference - top:0;


 5:00 pm on Aug 9, 2002 (gmt 0)

both divs are used for content and for display.

It is the #main div that is being unruly in NN6.2.

I changed the top value but the display didn't change at all.

Both divs have the same top value and the same margin value, the sit side by side. The only difference I see is that the sidebar has a set width and has position:absolute will the #main dive uses margins to position it horizontally.

However those margins are working, it is the vertical layout that is hosed.


 5:22 pm on Aug 9, 2002 (gmt 0)

Both divs have the same top value and the same margin value...

Don't forget the variance in placing your left menu 100px down from the top. This is factored into the (%) equation and needs to be considered if you are attempting to bottom-align your divs.

80% is 80%, but the #leftbar <div> has a 100px headstart! ;)

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