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

IP logged posted posted 12-08-2002 06:23 Edit Quote

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

IP logged posted posted 12-08-2002 07:16 Edit Quote

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

IP logged posted posted 12-08-2002 07:20 Edit Quote

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

IP logged posted posted 12-08-2002 10:16 Edit Quote

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

IP logged posted posted 12-08-2002 11:11 Edit Quote

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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu