Re: Does height 100% work with html 401 strict?

In our last episode,
<2772a9ae-8ee3-48cc-97c4-e88fc3156f73@xxxxxxxxxxxxxxxxxxxxxxxxxxx>, the
lovely and talented toxee broadcast on alt.html:

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.


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.

--
Lars Eighner <http://larseighner.com/> September 5867, 1993
245 days since Rick Warren prayed over Bush's third term.
Obama: No hope, no change, more of the same. Yes, he can, but no, he won't.
.

Relevant Pages

  • Re: negative values Re: margin-right no effect whatsoever
    ... block;' div a margin ... you can see ­ with hindsight ­ how one overflows while ... But why are the right borders of the two div-s not at the same place ... deliberately given different right margins so why would you ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: negative values Re: margin-right no effect whatsoever
    ... There are no borders around margins. ... block;' div a margin ... you can see ­ with hindsight ­ how one overflows while ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Overlapping elements dont quite match
    ... Here you can see that offsetWidth includes the width of any borders: ... If you look at the CSS specifications you will find that with what you are doing the positioning is *specified* as being from the /padding edge/ of the containing element. ... You have not specified what sort of puzzle game it is. ... My question, reworded so there's less confusion, is how to use javascript to place one DIV exactly over the top of another DIV in a cross browser way. ...
    (comp.lang.javascript)
  • Re: negative values Re: margin-right no effect whatsoever
    ... There are no borders around margins. ... block;' div a margin ... you can see ­ with hindsight ­ how one overflows while ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Overlapping elements dont quite match
    ... which have borders which you didn't take into account when you were ... Isn't offsetLeft supposed to return the position to the upper left ... Here you can see that offsetWidth includes the width of any borders: ... javascript to place one DIV exactly over the top of another DIV in a ...
    (comp.lang.javascript)