homepage Welcome to WebmasterWorld Guest from
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

Any help in keeping height of Div 100%

5+ Year Member

Msg#: 3755549 posted 1:41 pm on Sep 30, 2008 (gmt 0)

i have designed css based layout ,but there is one problem #MnuDiv and #ContDiv doesn't take the 100% height even though i have specify it in css
what i am actually looking for is what ever the height of content div..menu div height should be the same

i paste my css down here

#maincontainer{background:#FCFCFC;width:98%;height:100%;padding:0;margin:0 ;position:relative;}

#logo {padding:2px;float:left;height:100%;width:25%;}



.ContHeading {background:#F7F7F7;color:#004a95;padding:7px 7px 5px;}
.ContDet{margin:5px 0 0;padding:2px;height:100%;overflow:visible;}


can u please suggest me where i should do the changes......any suggestion is highly appreciated



WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3755549 posted 3:36 pm on Sep 30, 2008 (gmt 0)

Welcome to webmasterworld.

height specified in percentage means relative to the containing block, but there are a few gotchas:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

This goes back all the way to the root element (which does have a height of the viewport).

So unless you explicitly set the height yourself somehow, it's not going to play along with you I'm afraid.

To make columns look the same: it's possible fake backgrounds can help: vertically repeat an image as background on the parent. If needed stretch the parent with a clear (as I see both your columns are floated (which in itself isn't necessary)

Since you use the mozilla proprietary border radius:

  • webkit also has a similar one named "-webkit-border-bottom-left-radius", should be good for safari and chrome a.o.
  • CSS3's is here: [w3.org...]


5+ Year Member

Msg#: 3755549 posted 5:00 am on Oct 1, 2008 (gmt 0)

hey dear swa66 thanx for your advice
well i browse through both of the links which u gave its really come handy
i liked your idea of putting image at background..it really helped

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