trouble with percent height and absolute pos divs — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

trouble with percent height and absolute pos divs

This page's ID: 10965

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I inserted this doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> and started playing around with it. I discovered that setting the height of body and html to 100% didn't make its height expand with the content area. (I discovered this by adding a blue border to the body tag to see where its dimensions were). So the first thing that needed to be tackled was to make the body tag expand vertically to contain the content area. Simplest way to do this was to make the content area not absolutely positioned, but rather to offset its position on the page via margins (and since all other things on the page are absolutely positioned, they don't interfere with this). I changed its CSS to: #content { margin-left:320px; margin-top:0px; width:441px; height:100%; ... } This successfully expanded the body's height, however the height of the menu on the left still depended on the height of the viewing screen. I came to the conclusion that this was because of being positioned absolutely. I tried inserting a container div within the body tag but around everything else. I tried multiple combinations of height:100% and position:absolute on this div. Nothing helped. Even making the menu float:left rather than be absolutely positioned didn't change how its height was calculated. At this point I declared myself "stuck." I think you should look into other ways of creating the effect you want. It looks like all you need to extend vertically are some background images. You might be able to create this effect by keeping the body's background as is, but making the content area's background be that stuff that repeats vertically on the left, and then make the content area's leftmost part adjacent with the left edge of the browser window, but give it a lot of padding to keep the text from being on top of its background image. If all else fails, you may need to resort to a table skeleton (a table with maybe 3 cells) to get the page to look right. I don't think that will be necessary though, not at this point. Try other ways of displaying the divs to create the effect without the necessity of a 100% height div. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu