homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
px or % on CSS heights?
pcguru333




msg:1220282
 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?

 

madcat




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

Check this thread out:

[webmasterworld.com...]

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

pcguru333




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

Thanks

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 {
background-color:#fff;
margin: 0;
font:14px arial;
color:#000;
height:100%;
}

#leftbar
{
position:absolute;
background-color:#048;
left:5px;
top:100px;
width:150px;
height:80%;
}

#main{
border:1px solid #048;
margin: 0 5px 0 154px;
height:80%;
}

#menu{
border-right:1px dotted #048;
border-bottom:1px dotted #048;
float:left;
width:160px;
margin:0 10px 10px 0;
padding:3px;
text-align:right;
}

papabaer




msg:1220285
 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.

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

pcguru333




msg:1220286
 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.

papabaer




msg:1220287
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved