div height issue

Discussion in 'HTML' started by mark.olszowka@gmail.com, Jan 20, 2006.

  1. Guest

    My Goal

    Creat a page consisting of a floating, centered, content section whose
    background is a different color than the background of the page itself

    this content section should extend to the bottom of the browser window,
    or to the bottom of the content residing within the content section,
    whichever is greater.

    the page needs to display/behave correctly in IE, FireFox, Opera, and
    Netscape (i would settle for IE and FireFox).

    the test page markup is included below

    the page, as it is currently coded, works fine in IE, but not in
    FireFox, Opera, or Netscape.

    To see issue in other browsers, do the following

    make browser window smaller than content so scrollbars appear
    refresh page
    scroll down page using scrollbars
    you should see center content color end

    if you resize browser window, page/content displays correctly


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">
    html
    {
    height: 100%;
    }
    body {
    height: 100%;
    margin:0;
    }
    #txt
    {
    background-color: lime;
    width: 600px;
    margin: auto;
    height: 100%;
    }
    </style>
    </head>
    <body>
    <div id="txt">
    <table>
    <tr><td>1000</td></tr>
    <tr><td>2000</td></tr>
    <tr><td>3000</td></tr>
    <tr><td>4000</td></tr>
    <tr><td>5000</td></tr>
    <tr><td>6000</td></tr>
    <tr><td>7000</td></tr>
    <tr><td>1000</td></tr>
    <tr><td>2000</td></tr>
    <tr><td>3000</td></tr>
    <tr><td>4000</td></tr>
    <tr><td>5000</td></tr>
    <tr><td>6000</td></tr>
    <tr><td>7000</td></tr>
    </table>
    </div>
    </body>
    </html>

    Does anybody know how to accomplish this task?

    I have tried different combinations of height and
    min-height/max-height, but to no avail.

    Thanks
    , Jan 20, 2006
    #1
    1. Advertising

  2. BootNic Guest

    > "" <> wrote:
    > news:....
    >
    > My Goal
    >
    > Creat a page consisting of a floating, centered, content section
    > whose background is a different color than the background of the
    > page itself
    >
    > this content section should extend to the bottom of the browser
    > window, or to the bottom of the content residing within the content
    > section, whichever is greater.
    >
    > the page needs to display/behave correctly in IE, FireFox, Opera,
    > and Netscape (i would settle for IE and FireFox).
    >
    > the test page markup is included below
    >
    > the page, as it is currently coded, works fine in IE, but not in
    > FireFox, Opera, or Netscape.
    >
    > To see issue in other browsers, do the following
    >
    > make browser window smaller than content so scrollbars appear
    > refresh page scroll down page using scrollbars you should see
    > center content color end
    >
    > if you resize browser window, page/content displays correctly
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html>
    > <head>
    > <title>Test</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1" />
    > <style type="text/css"> html { height: 100%; } body { height: 100%;
    > margin:0; } #txt { background-color: lime; width: 600px; margin:
    > auto; height: 100%; } </style> </head>
    > <body>
    > <div id="txt">

    <div style="background-color: inherit;">
    > <table>
    > <tr><td>1000</td></tr>
    > <tr><td>2000</td></tr>
    > <tr><td>3000</td></tr>
    > <tr><td>4000</td></tr>
    > <tr><td>5000</td></tr>
    > <tr><td>6000</td></tr>
    > <tr><td>7000</td></tr>
    > <tr><td>1000</td></tr>
    > <tr><td>2000</td></tr>
    > <tr><td>3000</td></tr>
    > <tr><td>4000</td></tr>
    > <tr><td>5000</td></tr>
    > <tr><td>6000</td></tr>
    > <tr><td>7000</td></tr>
    >
    > </table>

    </div>
    > </div> </body> </html>
    >
    > Does anybody know how to accomplish this task?
    >

    [snip]

    Wrap the table in a div and set the background color to inherit.

    --
    BootNic Friday, January 20, 2006 8:06 PM

    A well-developed sense of humor is the pole that adds balance to your step as you walk the tightrope of life
    *William Arthur Ward*
    BootNic, Jan 21, 2006
    #2
    1. Advertising

  3. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > My Goal
    >
    > Creat a page consisting of a floating, centered, content section whose
    > background is a different color than the background of the page itself


    What you're basically talking about is the vertical centering of small
    content. As far as I know, there is no way to do this absolutely
    perfectly in the 3 currently most-popular browsers using the same
    markup, especially under the auspices of the existing standards, but one
    can get close.

    The best I've come up with so far is at:

    http://www.neredbojias.com/zexae/vcscex.html

    Notice there is no doctype, and there shouldn't be.

    Now, if you want the inner container to extend to 100% height (re.
    background) even with lesser content, you will probably have to use
    another table, which gets hairy. But experiment. That's how solutions
    are discovered.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Jan 21, 2006
    #3
  4. Guest

    I should have clarified that the center section need only be
    horizontally centered, not vertically centered.

    And yes the inner container needs to extend all the way to the bottom
    of the "browser window", regardless of the actual size of the content.

    And yes, I have been experimenting for 3 days now without success.
    That's when I decided that further experimentation on my part was
    futile without first getting feedback from individuals on this group.

    (still have yet to find the markup that works)
    , Jan 23, 2006
    #4
  5. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > I should have clarified that the center section need only be
    > horizontally centered, not vertically centered.
    >
    > And yes the inner container needs to extend all the way to the bottom
    > of the "browser window", regardless of the actual size of the content.
    >
    > And yes, I have been experimenting for 3 days now without success.
    > That's when I decided that further experimentation on my part was
    > futile without first getting feedback from individuals on this group.
    >
    > (still have yet to find the markup that works)


    Hmm, I believe that is relatively straight-forward with css:

    table {
    margin:auto;
    height:100%;
    background:huckleberry;
    }

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Jan 23, 2006
    #5
  6. Guest

    that seemed to do the trick...

    i was trying to avoid tables to accomplish this effect (despite the
    fact that my sample had a table in it...mere coincidence)

    i wanted to stick with using div's, but from everything I have read so
    far, this is impossible under the current standards.

    anyway, the table solution you provided is a viable "workaround" for my
    current problem.

    thanks for your help!
    , Jan 23, 2006
    #6
  7. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > that seemed to do the trick...
    >
    > i was trying to avoid tables to accomplish this effect (despite the
    > fact that my sample had a table in it...mere coincidence)


    I know what you're saying, but divs don't expand with content (-except
    in IE which is wrong) as defined by the current standards.

    > i wanted to stick with using div's, but from everything I have read so
    > far, this is impossible under the current standards.


    Tables are okay if not used unnecessarily, and sometimes they are
    necessary.

    > anyway, the table solution you provided is a viable "workaround" for my
    > current problem.
    >
    > thanks for your help!


    'Welcome.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Jan 24, 2006
    #7
    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. HJ
    Replies:
    5
    Views:
    825
    Jonathan N. Little
    Sep 1, 2006
  2. SM
    Replies:
    2
    Views:
    559
    Andrew Morton
    Nov 26, 2009
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    845
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    129
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    110
Loading...

Share This Page