Topic: 100% of the containing element $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10869" title="Pages that link to Topic: 100% of the containing element" rel="nofollow" >Topic: 100% of the containing element\$

Author	Thread
Rooster Bipolar (III) Inmate From: the uterus Insane since: Nov 2002	posted 12-08-2002 06:23 Okay.........grrr.... Is there some way to make a <div> actually apply a width of 100% of its containing element. I have a test page that looks like this. The code looks like this... code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css" id="internal_style"> body { margin:0px; padding:0px; text-align:center; } #content { width:500px; height:100%; margin:0px auto; text-align:left; padding:0px; border:1px solid red; background-color:#EEEEEE; } </style> <title>Document Title</title> </head> <body> <div id="content"> Why this? Why me? </div> </body> </html> When viewed, each browser makes the <div> tag the minimum size needed to fit in the text inside. However, when there is no DTD included, all browsers actually make the <div> tag 100% of the window; this is not dependent on which DTD because I?ve tried them all. I don?t really want to remove the DTD just to make this work, but I most definitely will if I have to. And if I set the position of the <div> tag to absolute it will also make it 100% of the window, but then it?s no longer located in the ~center~ of the window. I know I could set the position to absolute and then use negative margins to center it horizontally but that method comes with a major flaw. When the <div> you?re trying to position is of any reasonable size and the user resizes the window the scrollbars only work for half of the <div> leaving the other half lost in negative land. Does anyone know a proper way to achieve this affect? Edit: Is anyone else having a hard time trying to get onto the GN site? :: ~Existence is a mere pattern.~ :: [This message has been edited by Rooster (edited 12-08-2002).]
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 12-08-2002 07:16 Oh, I always forget how height-percentages work. But my first attempt would be to set the height of the body to 100%.
Rooster Bipolar (III) Inmate From: the uterus Insane since: Nov 2002	posted 12-08-2002 07:20 You are so right... I got it to work after changing the width and height of the body to 100%, I thought it might be something simple like that. Thanks slime. Edit: Edit: Also, the position for the body needs to be set to absolute in order for it to work in NS and Mozilla! :: ~Existence is a mere pattern.~ :: [This message has been edited by Rooster (edited 12-08-2002).] [This message has been edited by Rooster (edited 12-08-2002).]
HZR Bipolar (III) Inmate From: Cold Sweden Insane since: Jul 2002	posted 12-08-2002 10:16 The body's position set to absolute? That sounds a little weird. Try setting the absolute positioning to the element instead.
Rooster Bipolar (III) Inmate From: the uterus Insane since: Nov 2002	posted 12-08-2002 11:11 That's the only way I can make it do what I want in NS and Mozilla. I've honestly tried everything else I could think of. :: ~Existence is a mere pattern.~ ::

Topic: 100% of the containing element\$

Author

Thread

Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

posted 12-08-2002 06:23

Okay.........grrr....
Is there some way to make a <div> actually apply a width of 100% of its containing element.

I have a test page that looks like this.

The code looks like this...

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<style type="text/css" id="internal_style">

		body {

			margin:0px; 

			padding:0px;

			text-align:center;

			}

		#content {

			width:500px;

			height:100%;

			margin:0px auto;

			text-align:left;

			padding:0px;

			border:1px solid red;

			background-color:#EEEEEE;

			}

		</style>

		<title>Document Title</title>

	</head>

	<body>

		<div id="content">

			Why this? Why me?

		</div>

	</body>

</html>

When viewed, each browser makes the <div> tag the minimum size needed to fit in the text inside. However, when there is no DTD included, all browsers actually make the <div> tag 100% of the window; this is not dependent on which DTD because I?ve tried them all. I don?t really want to remove the DTD just to make this work, but I most definitely will if I have to.

And if I set the position of the <div> tag to absolute it will also make it 100% of the window, but then it?s no longer located in the ~center~ of the window. I know I could set the position to absolute and then use negative margins to center it horizontally but that method comes with a major flaw. When the <div> you?re trying to position is of any reasonable size and the user resizes the window the scrollbars only work for half of the <div> leaving the other half lost in negative land.

Does anyone know a proper way to achieve this affect?

Edit: Is anyone else having a hard time trying to get onto the GN site?

::
~Existence is a mere pattern.~
::

[This message has been edited by Rooster (edited 12-08-2002).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 12-08-2002 07:16

Oh, I always forget how height-percentages work. But my first attempt would be to set the height of the *body* to 100%.

Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

posted 12-08-2002 07:20

You are so right...

I got it to work after changing the width and height of the body to 100%, I thought it might be something simple like that.

Thanks slime.

Edit:

Edit: Also, the position for the body needs to be set to absolute in order for it to work in NS and Mozilla!

::
~Existence is a mere pattern.~
::

[This message has been edited by Rooster (edited 12-08-2002).]

[This message has been edited by Rooster (edited 12-08-2002).]

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

posted 12-08-2002 10:16

The body's position set to absolute? That sounds a little weird. Try setting the absolute positioning to the element instead.

Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

posted 12-08-2002 11:11

That's the only way I can make it do what I want in NS and Mozilla. I've honestly tried everything else I could think of.

::
~Existence is a mere pattern.~
::

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: 100% of the containing element

Insert Slimies »

Insert UBB Code »

Topic: 100% of the containing element $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10869" title="Pages that link to Topic: 100% of the containing element" rel="nofollow" >Topic: 100% of the containing element\$