Topic: trouble with percent height and absolute pos divs $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10965" title="Pages that link to Topic: trouble with percent height and absolute pos divs" rel="nofollow" >Topic: trouble with percent height and absolute pos divs\$

Author	Thread
JKMabry Maniac (V) Inmate From: out of a sleepy funk Insane since: Aug 2000	posted 05-05-2003 00:38 I'm having a problem that sorta makes sense, but then again sorta doesn't. THE VISUAL AID Ok, the trouble is not readily apparent, but if you size the height of your broswer window so that you have to scroll this page, then scroll down, you will see the problem (you will have to scroll in 768 height or under). Depending on which browser you're looking at it in, the div's area beyond what's immediately and initially visible will be devoid of it's background. Whatupwidat?! Jason
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 05-05-2003 02:32 The body is essentially the viewing window. Hence, the divs are 100% of the viewing window size. You might be able to change this behavior by adding a correct doctype. I'm not sure. Try adding one and see what happens. You might also try adding the CSS rules body {width:100%;} html {width:100%;} on top of that.
JKMabry Maniac (V) Inmate From: out of a sleepy funk Insane since: Aug 2000	posted 05-05-2003 03:21 bleh, I knew better than to come up in here without a DOCTYPE, sorry. But alas no matter what I did with the combinations of doctype and html and body heights, nothing worked. Adding height to the body _did_ alter things a bit but not to the desired effect, I would have never thought of that however, thanks. Is there any way, using DIVs to get 100% height or width?!?! Surely! Jason
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 05-05-2003 04:16 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.
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 05-05-2003 04:20 Oh, by the way, while doing all of those tests, I had these two CSS rules in there: body {border:1px solid blue;} div {border:1px solid red;} While this slightly throws off the box size measurements by a pixel or two, it makes it a lot easier to figure out what's actually going on.
JKMabry Maniac (V) Inmate From: out of a sleepy funk Insane since: Aug 2000	posted 05-05-2003 06:07 good stuff man, thanks for hackin around on it. I fear the 3 celled table as well. I usually don't mind using a table at all but this layout is so daggum simple it shouldn't have to be a table is what I'm thinking. I'm trying real hard to not have to float anything but it's either gonna be that or a table I'm afraid, hack either way. Thanks again, I'll be back Jason
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 05-05-2003 07:07 I wouldn't say floating is a hack. Even if it is, it still maintains the separation of style from markup, so it's not a bad hack. I don't think that floating will be necessary here anyway. I don't think it would help.
JKMabry Maniac (V) Inmate From: out of a sleepy funk Insane since: Aug 2000	posted 05-05-2003 07:29 no it's not, but one would be required for it to display cross browser right? Tables aren't really a hack either. Bad word choice. You programmers are such literalists =) Jason
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 05-06-2003 04:42 More info on this: http://www.aquasition.net/archive/2003/05/03/css_where_art_thou_height_auto.html http://bugzilla.mozilla.org/show_bug.cgi?id=88641#c11
JKMabry Maniac (V) Inmate From: out of a sleepy funk Insane since: Aug 2000	posted 05-06-2003 07:57 very nice! thank you thank you thank you! I've been on a hate the w3c kick lately and this is just a little backing. It's not often (never) that you get that kind of support Lately I've felt like they're going toward a complete lack of graphic design on the internet, just flexible delivery of content. I think if that's the case they should think seriously about another spec or doctype something or other for graphically designed webs for monitors only. Seriously. The web should be more than a volume of text, it's deliverable on big plasma screens and whatnot, c'mon, it's not just cells phone, pdas, screen readers etc. Is that foolish paranoid thought you think? bleh. 2 great links tho, thanks man. Jason

Topic: trouble with percent height and absolute pos divs\$

Author

Thread

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted 05-05-2003 00:38

I'm having a problem that sorta makes sense, but then again sorta doesn't.

THE VISUAL AID

Ok, the trouble is not readily apparent, but if you size the height of your broswer window so that you have to scroll this page, then scroll down, you will see the problem (you will have to scroll in 768 height or under). Depending on which browser you're looking at it in, the div's area beyond what's immediately and initially visible will be devoid of it's background.

Whatupwidat?!

Jason

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 05-05-2003 02:32

The body is essentially the viewing window. Hence, the divs are 100% of the viewing window size.

You might be able to change this behavior by adding a correct doctype. I'm not sure. Try adding one and see what happens. You might also try adding the CSS rules

body {width:100%;}
html {width:100%;}

on top of that.

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted 05-05-2003 03:21

bleh, I knew better than to come up in here without a DOCTYPE, sorry. But alas no matter what I did with the combinations of doctype and html and body heights, nothing worked. Adding height to the body _did_ alter things a bit but not to the desired effect, I would have never thought of that however, thanks.

Is there any way, using DIVs to get 100% height or width?!?! Surely!

Jason

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 05-05-2003 04:16

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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 05-05-2003 04:20

Oh, by the way, while doing all of those tests, I had these two CSS rules in there:

body {border:1px solid blue;}
div {border:1px solid red;}

While this slightly throws off the box size measurements by a pixel or two, it makes it a *lot* easier to figure out what's actually going on.

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted 05-05-2003 06:07

good stuff man, thanks for hackin around on it. I fear the 3 celled table as well. I usually don't mind using a table at all but this layout is so daggum simple it shouldn't have to be a table is what I'm thinking. I'm trying real hard to not have to float anything but it's either gonna be that or a table I'm afraid, hack either way.

Thanks again, I'll be back

Jason

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 05-05-2003 07:07

I wouldn't say floating is a hack. Even if it is, it still maintains the separation of style from markup, so it's not a *bad* hack.

I don't think that floating will be necessary here anyway. I don't think it would help.

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted 05-05-2003 07:29

no it's not, but one would be required for it to display cross browser right? Tables aren't really a hack either. Bad word choice. You programmers are such literalists =)

Jason

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 05-06-2003 04:42

More info on this:
http://www.aquasition.net/archive/2003/05/03/css_where_art_thou_height_auto.html http://bugzilla.mozilla.org/show_bug.cgi?id=88641#c11

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted 05-06-2003 07:57

very nice! thank you thank you thank you! I've been on a hate the w3c kick lately and this is just a little backing. It's not often (never) that you get that kind of support Lately I've felt like they're going toward a complete lack of graphic design on the internet, just flexible delivery of content. I think if that's the case they should think seriously about another spec or doctype something or other for graphically designed webs for monitors only. Seriously. The web should be more than a volume of text, it's deliverable on big plasma screens and whatnot, c'mon, it's not just cells phone, pdas, screen readers etc.

Is that foolish paranoid thought you think?

bleh. 2 great links tho, thanks man.

Jason

Post Reply

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	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: trouble with percent height and absolute pos divs

Insert Slimies »

Insert UBB Code »

Topic: trouble with percent height and absolute pos divs $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10965" title="Pages that link to Topic: trouble with percent height and absolute pos divs" rel="nofollow" >Topic: trouble with percent height and absolute pos divs\$