Does height 100% work with html 401 strict?

Discussion in 'HTML' started by toxee, Sep 22, 2009.

  1. toxee

    toxee Guest

    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!
    toxee, Sep 22, 2009
    #1
    1. Advertising

  2. toxee

    Nik Coughlin Guest

    Nik Coughlin, Sep 23, 2009
    #2
    1. Advertising

  3. toxee

    dorayme Guest

    In article <h9bnj6$qo9$-september.org>,
    "Nik Coughlin" <> wrote:

    > "toxee" <> wrote in message
    > news:...
    > > 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


    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...

    --
    dorayme
    dorayme, Sep 23, 2009
    #3
  4. toxee

    Neredbojias Guest

    On 22 Sep 2009, toxee <> wrote:

    > 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.


    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    Neredbojias, Sep 23, 2009
    #4
  5. toxee

    toxee Guest

    On Sep 22, 9:54 pm, dorayme <> wrote:
    > In article <h9bnj6$-september.org>,
    >  "Nik Coughlin" <> wrote:
    >
    > > "toxee" <> wrote in message
    > >news:....
    > > >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

    >
    > 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...
    >
    > --
    > dorayme


    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.
    toxee, Sep 23, 2009
    #5
  6. toxee

    dorayme Guest

    In article
    <>,
    toxee <> wrote:

    > On Sep 22, 9:54 pm, dorayme <> wrote:
    > > In article <h9bnj6$-september.org>,
    > >  "Nik Coughlin" <> wrote:
    > >

    ....
    > >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.


    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.

    --
    dorayme
    dorayme, Sep 23, 2009
    #6
  7. toxee

    Lars Eighner Guest

    In our last episode,
    <>, 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.
    Lars Eighner, Sep 23, 2009
    #7
  8. toxee

    toxee Guest

    On Sep 23, 1:39 am, dorayme <> wrote:
    > In article
    > <>,
    >
    >
    >
    >  toxee <> wrote:
    > > On Sep 22, 9:54 pm, dorayme <> wrote:
    > > > In article <h9bnj6$-september.org>,
    > > >  "Nik Coughlin" <> wrote:

    >
    > ...
    > > >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.

    >
    > 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.
    >
    > --
    > dorayme



    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, Sep 24, 2009
    #8
  9. toxee

    toxee Guest

    On Sep 23, 2:38 am, Lars Eighner <> wrote:
    > In our last episode,
    > <>, 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.


    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.
    toxee, Sep 24, 2009
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Not4u
    Replies:
    9
    Views:
    1,021
    Not4u
    Feb 27, 2004
  2. Replies:
    8
    Views:
    6,644
    Neredbojias
    Dec 9, 2005
  3. Bernd Meier
    Replies:
    6
    Views:
    494
    GTalbot
    Jan 14, 2008
  4. fred
    Replies:
    3
    Views:
    253
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    856
Loading...

Share This Page