homepage Welcome to WebmasterWorld Guest from 54.226.230.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Menu outside of the body area
Dudermont




msg:1184766
 10:54 pm on Sep 20, 2004 (gmt 0)

This is my first css-p site and have one last issue.

The menu is absolutely position on the right side of the page. When there is little text on the page the menu extends over the footer and past the the container that it is in. How can I make the body div (main content of the page) at least as tall as the menu. or can I place another div or something inside it just for that.

 

createErrorMsg




msg:1184767
 2:09 am on Sep 21, 2004 (gmt 0)

CSS2 has a min-height property that defines the minimum height an element can have. It's useful for just this sort of thing, but, unfortunately, isn't supported by IE (the one with the most users...go figure).

The good news is there's a work around.

disclaimer
Be warned. I'm good for some things, but this isn't a technique I've ever actually used in a layout, so this is all coming from my understanding of concepts and other bits I've read. It might be worth giving those who are intimately familiar with this technique a chance to double check my code and correct it's errors or theory-laspes before putting it to use.

That said...say your sidebar nav is 200px tall. You can give the <div> next to it a min-height of 200px. This works for Mozilla and FireFox and probably NN, but not IE. Fortunately, IE mistakenly implements the regular height property in the same way the specs say min-height is used, that is, it makes the element as tall as the height setting, then expands the element to enclose any content that goes longer than the set height.

So this in compliant browsers...

#content {
min-height: 200px;
}

...and this in IE...
#content {
height: 200px;
}

...give the same results.

You could combine the two...
#content {
min-height: 200px;
height: 200px;
}

But it causes some problems. IE ignores the min-height rule and incorrectly implements height as described above, so in IE the above code would work fine. The problem is that compliant browsers will also apply the height property, except they apply it correctly.

The correct implementation of height is that the element will have the given height, period. This means any content that is longer than the specified height will flow right out of the container and overlap whatever comes below it. So if you want it to work, only IE can get that 200px height value. Everyone else needs height: auto.

To do this, style the element for complaint browsers, then use a hack to feed only IE the height value. It goes like this...

#content {
min-height: 200px;
height: auto; /*for compliant browsers*/
}

* html #content {
height: 200px;
}

The '* html' selector applies only to IE browsers, so the height:200px; property overrides the height:auto in IE, but is ignored by everyone else.

What I'm not sure about is whether IE6 in Standards-Mode handles the height property like an IE browser or like a compliant browser.

DOes anybody know the answer to this? If IE6 Standards treats height values like a compliant browser, there would be one small addition to the above code. Otherwise, I think it will work.

Dudermont




msg:1184768
 6:45 pm on Sep 22, 2004 (gmt 0)

Thanks createErrorMsg that did the trick perfectly.

Much appreciated.

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