elements with width:100% within an "absolutely" positioned DIV's

Forum Moderators: not2easy

Message Too Old, No Replies

elements with width:100% within an "absolutely" positioned DIV's

dmorison

12:48 pm on May 27, 2003 (gmt 0)

Hey,

Just having my first folly into absolutely positioned DIV's and come across a weird one - apologies if this is an FAQ but i've tried searching.

I have an absolutely positioned DIV that begins, say, 200px in from the left.

Then within that DIV, I want to have <textarea> that fills the width of the DIV (which normally extends to the width of the browser window).

I'm using:

Trouble is, the browser gives the <textarea> a width equivalent to 100% of the entire browser window, even though it starts 200px in from the left, meaning that a horizontal overflow (and hence scroll bar) are introduced.

a) Do you see what I'm getting at

and if so;

b) How do you create an element that is 100% the width of its parent element within an absolutely positioned DIV?

Thanks!

BlobFisk

1:21 pm on May 27, 2003 (gmt 0)

Have you tried setting the display setting of the textarea to inline?

dmorison

5:17 pm on May 27, 2003 (gmt 0)

Hi,

Thanks for that, but no difference i'm afriad.

However, i've discovered that it is dependent upon the <!DOCTYPE given at the top of the HTML.

With no DOCTYPE, it works fine.

With the XHTML Transitional DOCTYPE, the problem occurs.

Here's the CSS:


.pl
{
 position: absolute; width: 200px;
 left: 10px;
}
.pr
{
 position: absolute; left: 250px;
}

and the HTML:


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<link rel='stylesheet' type='text/css' href='test.css'>
</head>
<body>
<div class='pl'>
 <h1>Left</h1>
</div>
<div class='pr'>
 <h1>Right</h1>
 <textarea style='width:100%' rows='5'></textarea>
</div>
</body></html>

Without the DOCTYPE it works fine....!

ruserious

6:01 pm on May 27, 2003 (gmt 0)

For the Doctype thing, search for Doctype switch:
http://css-discuss.incutio.com/?page=DoctypeSwitch
Most modern browsers use it to decide on how to render the page, assuming that pages with a defined Doctype are adhering to standards and thus are rendered in Strict-Rendering-Mode, and that pages without a doctype definition are somewhat older and were written so they worked with older browsers and thus are renderes in so called Quirks-Mode, which resembles how older browsers rendered pages (namely IE 5).

Unfortunately it's kind of hard mixing fixed px values with relative values. Set the right-margin to say 33% and the width to 67%. that would work.