Does height 100% work with html 401 strict?

[toxee]

http://www.fthministries.hyperphp.com/poetry/index.html

So basically I want the two side divs "left" and "right" to take up
100% of the #content container div. I added 100% height for the
container and 100% height for the two divs, but no matter what they
refuse to occupy any unused space apparently. I got rid of the doc
type and noticed the height was recognized after a refresh. I changed
it back and just to be sure, I tried setting the side divs to
something like 95% in case of some conflict, but still no. Any help or
a little closure would be greatly appreciated.

PS, what's up with the huge jolt of spam? If it's not just my
end....wow!

 

[Nik Coughlin]

http://www.fthministries.hyperphp.com/poetry/index.html

PS, what's up with the huge jolt of spam? If it's not just my
end....wow!

I see maybe one or two a day, and they've usually disappeared by the next
time I visit

 

[dorayme]

I see maybe one or two a day, and they've usually disappeared by the next
time I visit

In other words, get a newsreader and news service (both can be free).

OP might better explain his problem and why his mark up is the way it
is, why there is a left and right div in the first place etc...

 

[Neredbojias]

http://www.fthministries.hyperphp.com/poetry/index.html

So basically I want the two side divs "left" and "right" to take up
100% of the #content container div. I added 100% height for the
container and 100% height for the two divs, but no matter what they
refuse to occupy any unused space apparently. I got rid of the doc
type and noticed the height was recognized after a refresh. I changed
it back and just to be sure, I tried setting the side divs to
something like 95% in case of some conflict, but still no. Any help
or a little closure would be greatly appreciated.

You have to "establish" a height which is usually done with css as:

html,body { height:100%; }

PS, what's up with the huge jolt of spam? If it's not just my
end....wow!

The world is full of morons now and forever, amen.

 

[toxee]

In other words, get a newsreader and news service (both can be free).

OP might better explain his problem and why his mark up is the way it
is, why there is a left and right div in the first place etc...

Heh, sorry about that. The left and right divs are background panels
that I want to expand as the page expands, but unless there is
something actually inside the divs to make them, height 100% is
ignored and they are only tiny boxes in ie and take up virtually no
space in firefox.

Here's an example of the page with the doctype removed and the left
and right divs expnding. http://i35.tinypic.com/jf81g3.jpg

You have to "establish" a height which is usually done with css as:

html,body { height:100%; }

I added a 100% height to body as well before and it also made no
difference. The side divs still wouldn't expand.

 

[dorayme]

I added a 100% height to body as well before and it also made no
difference. The side divs still wouldn't expand.

Well do it again because that is what brings them on in good browsers.
Remember, your floats have a set width but a width without any height is
not much for an element to boast about. Many elements, if not most, are
shrink to fit as far as height is concerned, floats do it with width
too. Now given that they are floats and that there is no content, we
have a very serious situation on our hands. Shrinking to fit even a
little is at least something. But - c'mon now - shrinking to fit nothing
is really quite a severe situation! If you were a float, I can assure
you, you would be as shy in public.

At least do:

html {height: 100%;}

body {
font-family: "Times New Roman";
background-image: url(back.jpg);
margin: 0;height: 100%;
}

Don't remove the doctype. The reason your side divs don't have any
height is that they do not know what they are 100% of. They are lost in
non-space. I feel for them.

 

[Lars Eighner]

In our last episode,

Here's an example of the page with the doctype removed and the left
and right divs expnding. http://i35.tinypic.com/jf81g3.jpg

I assume you are trying to reproduce the effect of the jpg as a whole, not
one of the little pages depicted on it.

This is really very simple because you know the content will always be the
longest (heightiest) part. (It's a different problem with sidebars, when
you cannot be certain which will be the longest on any given page.)

Make your decorative left and right borders (which are not HTML borders)
into background images. Have the right border repeat vertically on the
right side of a big DIV. Put a medium DIV in the big DIV and give it a
right margin the width of the right image. Give the medium DIV a background
image that repeats vertically on the left side. Put a small DIV in the
medium div and give it a left margin the width of the left border. Zero out
all the margins that do not have background images in them, the HTML
borders, and the padding except for the small DIV.

You do not have to do anything with height. The height of all the DIVs will
be the height of the content of the small DIV and the backgrounds on the
right and left will tile to whatever height that is.

This should work on a very wide range of browsers. None of the DIVs is
empty, so I think you do not have to hack around shortcomings of older IE.
However, this will fail when the browser window is narrower than the sum of
the left and right margins. With some kinds of border patterns and a little
math, you can use percentage margins, and you could in this case if you are
willing to sacrifice the ragged look when the window gets too small.
Actually, I'd recommend you do that even in this case assuming your content
is more important than the decoration.

 

[toxee]

Well do it again because that is what brings them on in good browsers.
Remember, your floats have a set width but a width without any height is
not much for an element to boast about. Many elements, if not most, are
shrink to fit as far as height is concerned, floats do it with width
too. Now given that they are floats and that there is no content, we
have a very serious situation on our hands. Shrinking to fit even a
little is at least something. But - c'mon now - shrinking to fit nothing
is really quite a severe situation! If you were a float, I can assure
you, you would be as shy in public.

At least do:

html {height: 100%;}

body {
font-family: "Times New Roman";
background-image: url(back.jpg);
margin: 0;height: 100%;

}

Don't remove the doctype. The reason your side divs don't have any  
height is that they do not know what they are 100% of. They are lost in
non-space. I feel for them.

I added the body height tag and added the html height you mentioned
and voila, it worked! Now the only problem is everything in the
content div is getting cut off as it expands beyond a certain point. I
tried some of everything to get around this but couldn't. Thanks a ton
for the detailed help as always dorayme.

 

[toxee]

In our last episode,


I assume you are trying to reproduce the effect of the jpg as a whole, not
one of the little pages depicted on it.

This is really very simple because you know the content will always be the
longest (heightiest) part.  (It's a different problem with sidebars, when
you cannot be certain which will be the longest on any given page.)

Make your decorative left and right borders (which are not HTML borders)
into background images.  Have the right border repeat vertically on the
right side of a big DIV.  Put a medium DIV in the big DIV and give it a
right margin the width of the right image.  Give the medium DIV a background
image that repeats vertically on the left side.  Put a small DIV in the
medium div and give it a left margin the width of the left border.  Zero out
all the margins that do not have background images in them, the HTML
borders, and the padding except for the small DIV.

You do not have to do anything with height.  The height of all the DIVs will
be the height of the content of the small DIV and the backgrounds on the
right and left will tile to whatever height that is.

This should work on a very wide range of browsers.  None of the DIVs is
empty, so I think you do not have to hack around shortcomings of older IE..
However, this will fail when the browser window is narrower than the sum of
the left and right margins.  With some kinds of border patterns and a little
math, you can use percentage margins, and you could in this case if you are
willing to sacrifice the ragged look when the window gets too small.
Actually, I'd recommend you do that even in this case assuming your content
is more important than the decoration.

I did something with the two nested div method, the right div is
inside of the left and the content div makes both properly expand as
needed. I added some padding and margins the sizeof the background
images and it seems to be working.