the deal with my div

Discussion in 'ASP .Net' started by =?Utf-8?B?cm9kY2hhcg==?=, Nov 16, 2006.

  1. hey all,
    i have a plain and simple div on my page and all i've done was change the
    background color to fuchsia, made the height and width 95%.

    how come the div will expand width-wise the full 95% and not the height?

    thanks,
    rodchar
    =?Utf-8?B?cm9kY2hhcg==?=, Nov 16, 2006
    #1
    1. Advertising

  2. Heights are a tricky thing, they tend to do what they wish depending on the
    browser. Part of it is the way the browser interprets the page. If it
    decides that the content of the page only fills 40%, you may end up with a
    div that fills 95% of the 40%. A lot of it is the interpretation of heights
    as in the HTML W3C specs. To say the least, height attributes are often the
    bastard child and aren't treated with the same respect in the standards as
    widths are.


    --
    Hope this helps,
    Mark Fitzpatrick
    Former Microsoft FrontPage MVP 199?-2006

    "rodchar" <> wrote in message
    news:...
    > hey all,
    > i have a plain and simple div on my page and all i've done was change the
    > background color to fuchsia, made the height and width 95%.
    >
    > how come the div will expand width-wise the full 95% and not the height?
    >
    > thanks,
    > rodchar
    Mark Fitzpatrick, Nov 16, 2006
    #2
    1. Advertising

  3. Hi,

    rodchar wrote:
    > hey all,
    > i have a plain and simple div on my page and all i've done was change the
    > background color to fuchsia, made the height and width 95%.
    >
    > how come the div will expand width-wise the full 95% and not the height?
    >
    > thanks,
    > rodchar


    Try setting the form's height to 100%. In some browsers the form is
    considered as a rendered element, with a height and a width.

    Should that fail, consider including your DIV in a one-celled table,
    with a 100% width and height.

    HTH,
    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
    Laurent Bugnion, Nov 16, 2006
    #3
  4. Percentage values are based on the parent. The body height is only as high as
    it needs to be, not as high as the browser's window. You'd need to add in
    some javascript to read the browser window's height and then compute the
    height of the div to be 95% of that value. The same is technically true of
    the width value also, but the body's width defaults to the browser window's
    width. So the div's parent element (document.body) just happens to be the
    whole width of the browser.



    "rodchar" wrote:

    > hey all,
    > i have a plain and simple div on my page and all i've done was change the
    > background color to fuchsia, made the height and width 95%.
    >
    > how come the div will expand width-wise the full 95% and not the height?
    >
    > thanks,
    > rodchar
    =?Utf-8?B?SmFzb24gU3RlYXJucw==?=, Nov 16, 2006
    #4
  5. Please, for the love of CSS, don't use a table to do page layout.

    "Laurent Bugnion" wrote:

    > Hi,
    >
    > rodchar wrote:
    > > hey all,
    > > i have a plain and simple div on my page and all i've done was change the
    > > background color to fuchsia, made the height and width 95%.
    > >
    > > how come the div will expand width-wise the full 95% and not the height?
    > >
    > > thanks,
    > > rodchar

    >
    > Try setting the form's height to 100%. In some browsers the form is
    > considered as a rendered element, with a height and a width.
    >
    > Should that fail, consider including your DIV in a one-celled table,
    > with a 100% width and height.
    >
    > HTH,
    > Laurent
    > --
    > Laurent Bugnion, GalaSoft
    > Software engineering: http://www.galasoft-LB.ch
    > PhotoAlbum: http://www.galasoft-LB.ch/pictures
    > Support children in Calcutta: http://www.calcutta-espoir.ch
    >
    =?Utf-8?B?SmFzb24gU3RlYXJucw==?=, Nov 16, 2006
    #5
  6. Hi,

    Jason Stearns wrote:
    > Percentage values are based on the parent. The body height is only as high as
    > it needs to be, not as high as the browser's window. You'd need to add in
    > some javascript to read the browser window's height and then compute the
    > height of the div to be 95% of that value. The same is technically true of
    > the width value also, but the body's width defaults to the browser window's
    > width. So the div's parent element (document.body) just happens to be the
    > whole width of the browser.


    I fail to see why it's better to use JavaScript rather than a table to
    do that.

    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
    Laurent Bugnion, Nov 16, 2006
    #6
  7. Its not what tables were meant for. Tables are meant for displaying tabluar
    data. Yes it would solve this problem just as a screwdriver could be used as
    a pry bar.

    Using tables for page layout can cause other problems though, like CSS
    styles not cascading down into the table and it could become cumbersome for
    page readers for the deaf to have to read down into the <table> then the <tr>
    then the <td> just to get to the content.

    Its just not how HTML was designed. But it would work, yes.

    "Laurent Bugnion" wrote:

    > Hi,
    >
    > Jason Stearns wrote:
    > > Percentage values are based on the parent. The body height is only as high as
    > > it needs to be, not as high as the browser's window. You'd need to add in
    > > some javascript to read the browser window's height and then compute the
    > > height of the div to be 95% of that value. The same is technically true of
    > > the width value also, but the body's width defaults to the browser window's
    > > width. So the div's parent element (document.body) just happens to be the
    > > whole width of the browser.

    >
    > I fail to see why it's better to use JavaScript rather than a table to
    > do that.
    >
    > Laurent
    > --
    > Laurent Bugnion, GalaSoft
    > Software engineering: http://www.galasoft-LB.ch
    > PhotoAlbum: http://www.galasoft-LB.ch/pictures
    > Support children in Calcutta: http://www.calcutta-espoir.ch
    >
    =?Utf-8?B?SmFzb24gU3RlYXJucw==?=, Nov 16, 2006
    #7
  8. Correction. Page readers for the blind not the deaf. duh.

    "Jason Stearns" wrote:

    > Its not what tables were meant for. Tables are meant for displaying tabluar
    > data. Yes it would solve this problem just as a screwdriver could be used as
    > a pry bar.
    >
    > Using tables for page layout can cause other problems though, like CSS
    > styles not cascading down into the table and it could become cumbersome for
    > page readers for the deaf to have to read down into the <table> then the <tr>
    > then the <td> just to get to the content.
    >
    > Its just not how HTML was designed. But it would work, yes.
    >
    > "Laurent Bugnion" wrote:
    >
    > > Hi,
    > >
    > > Jason Stearns wrote:
    > > > Percentage values are based on the parent. The body height is only as high as
    > > > it needs to be, not as high as the browser's window. You'd need to add in
    > > > some javascript to read the browser window's height and then compute the
    > > > height of the div to be 95% of that value. The same is technically true of
    > > > the width value also, but the body's width defaults to the browser window's
    > > > width. So the div's parent element (document.body) just happens to be the
    > > > whole width of the browser.

    > >
    > > I fail to see why it's better to use JavaScript rather than a table to
    > > do that.
    > >
    > > Laurent
    > > --
    > > Laurent Bugnion, GalaSoft
    > > Software engineering: http://www.galasoft-LB.ch
    > > PhotoAlbum: http://www.galasoft-LB.ch/pictures
    > > Support children in Calcutta: http://www.calcutta-espoir.ch
    > >
    =?Utf-8?B?SmFzb24gU3RlYXJucw==?=, Nov 16, 2006
    #8
  9. =?Utf-8?B?cm9kY2hhcg==?=

    darrel Guest

    > styles not cascading down into the table and it could become cumbersome
    > for
    > page readers for the deaf to have to read down into the <table> then the
    > <tr>
    > then the <td> just to get to the content.


    Screen readers don't literally read the source code. Well formed tables
    shouldn't be much of an accessibility issue.

    That said, CSS does have many advantages.

    -Darrel
    darrel, Nov 16, 2006
    #9
  10. Hi,

    Jason Stearns wrote:
    > Its not what tables were meant for. Tables are meant for displaying tabluar
    > data. Yes it would solve this problem just as a screwdriver could be used as
    > a pry bar.
    >
    > Using tables for page layout can cause other problems though, like CSS
    > styles not cascading down into the table and it could become cumbersome for
    > page readers for the deaf to have to read down into the <table> then the <tr>
    > then the <td> just to get to the content.
    >
    > Its just not how HTML was designed. But it would work, yes.


    I agree. But getting the window's size with JavaScript is also a bad
    tool. Out of two bad tools, I prefer the one which works also without
    JavaScript ;-)

    Just my opinion, of course.

    BTW, in IE, setting the height of the body to 100% solves the problem.
    In Firefox it doesn't (at least not on Windows).

    Greetings,
    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
    Laurent Bugnion, Nov 16, 2006
    #10
  11. =?Utf-8?B?cm9kY2hhcg==?=

    darrel Guest

    > I agree. But getting the window's size with JavaScript is also a bad tool.

    How so? Seems that Javascript is the more applicable tool for this.

    Even with tables, 100% height isn't technically a standard (even though some
    browsers do support it).

    Personally, I'd just give the DIV a specific height and live with it. I try
    to avoid worrying about how tall the viewport is...let the page be as long
    as it needs to be.

    -Darrel
    darrel, Nov 16, 2006
    #11
  12. Good point. I do generally focus on Firefox first, then tweak for IE.
    Something i just tried and it worked ok in both FF2.0 and IE6 is

    <HEAD>
    <style>
    BODY
    {
    min-height:100%;
    }
    </style>

    </HEAD>

    <BODY>
    <div style="height:100%; border:black solid 1px;">
    TEST
    </div>
    </BODY>

    "Laurent Bugnion" wrote:

    > Hi,
    >
    > Jason Stearns wrote:
    > > Its not what tables were meant for. Tables are meant for displaying tabluar
    > > data. Yes it would solve this problem just as a screwdriver could be used as
    > > a pry bar.
    > >
    > > Using tables for page layout can cause other problems though, like CSS
    > > styles not cascading down into the table and it could become cumbersome for
    > > page readers for the deaf to have to read down into the <table> then the <tr>
    > > then the <td> just to get to the content.
    > >
    > > Its just not how HTML was designed. But it would work, yes.

    >
    > I agree. But getting the window's size with JavaScript is also a bad
    > tool. Out of two bad tools, I prefer the one which works also without
    > JavaScript ;-)
    >
    > Just my opinion, of course.
    >
    > BTW, in IE, setting the height of the body to 100% solves the problem.
    > In Firefox it doesn't (at least not on Windows).
    >
    > Greetings,
    > Laurent
    > --
    > Laurent Bugnion, GalaSoft
    > Software engineering: http://www.galasoft-LB.ch
    > PhotoAlbum: http://www.galasoft-LB.ch/pictures
    > Support children in Calcutta: http://www.calcutta-espoir.ch
    >
    =?Utf-8?B?SmFzb24gU3RlYXJucw==?=, Nov 16, 2006
    #12
  13. Hi,

    darrel wrote:
    >> I agree. But getting the window's size with JavaScript is also a bad tool.

    >
    > How so? Seems that Javascript is the more applicable tool for this.


    Because it's not cross browser compatible (at least not in my
    experience, and I'd love to be proven wrong, so don't hesitate ;-)

    http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

    And also because JavaScript is sometimes disabled. I rely on JavaScript
    (and people who know me know that I relied on it for a very long time,
    see comp.lang.javascript archives). I use it to improve the user
    experience, but the most important thing for me is that it must
    absolutely degrade gracefully. In other words, if it's not available, I
    want the user to notice as little as possible, and unfortunately when
    you use it to set the layout, he does notice.

    HTH,
    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
    Laurent Bugnion, Nov 16, 2006
    #13
  14. Hi,

    Jason Stearns wrote:
    > Good point. I do generally focus on Firefox first, then tweak for IE.
    > Something i just tried and it worked ok in both FF2.0 and IE6 is
    >
    > <HEAD>
    > <style>
    > BODY
    > {
    > min-height:100%;
    > }
    > </style>
    >
    > </HEAD>
    >
    > <BODY>
    > <div style="height:100%; border:black solid 1px;">
    > TEST
    > </div>
    > </BODY>


    Oh, something came to my mind, and I tested again with the body height
    set to 100%. It works fine with HTML 4.0 transitional DOCTYPE in both
    IE6 and FF1.5.

    However, even min-height fails in IE6 and FF1.5 with DOCTYPE set to XHTML...

    Also, if the DIV is enclosed in a form, the form's height must also be
    set to 100%.

    OK, that's really off topic now.

    HTH,
    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
    Laurent Bugnion, Nov 16, 2006
    #14
  15. =?Utf-8?B?cm9kY2hhcg==?=

    darrel Guest

    > And also because JavaScript is sometimes disabled. I rely on JavaScript
    > (and people who know me know that I relied on it for a very long time, see
    > comp.lang.javascript archives). I use it to improve the user experience,
    > but the most important thing for me is that it must absolutely degrade
    > gracefully. In other words, if it's not available, I want the user to
    > notice as little as possible, and unfortunately when you use it to set the
    > layout, he does notice.


    I agree, though I don't see that 'enhancing layout' is not an applicable use
    of javascript. Provided the markup is semantic, accessible, and is usable
    without javascript, I'm fine with that.

    -Darrel
    darrel, Nov 16, 2006
    #15
  16. Writing javascript to do x for one browser and y for another isn't hard, just
    time consuming and requires good testing. But i don't think that any asp.net
    application could be expected to run correctly with out javascript enabled on
    the client side. As far as i'm concerned if you don't have javascript enabled
    you're just not going to be able to function on today's web.

    rodchar, if i were you i would just read up on the w3c specs and do what
    ever works for you. there's lots of documentation on the benefits of
    tableless css design, but a table would fix this problem also.

    "Laurent Bugnion" wrote:

    > Hi,
    >
    > darrel wrote:
    > >> I agree. But getting the window's size with JavaScript is also a bad tool.

    > >
    > > How so? Seems that Javascript is the more applicable tool for this.

    >
    > Because it's not cross browser compatible (at least not in my
    > experience, and I'd love to be proven wrong, so don't hesitate ;-)
    >
    > http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
    >
    > And also because JavaScript is sometimes disabled. I rely on JavaScript
    > (and people who know me know that I relied on it for a very long time,
    > see comp.lang.javascript archives). I use it to improve the user
    > experience, but the most important thing for me is that it must
    > absolutely degrade gracefully. In other words, if it's not available, I
    > want the user to notice as little as possible, and unfortunately when
    > you use it to set the layout, he does notice.
    >
    > HTH,
    > Laurent
    > --
    > Laurent Bugnion, GalaSoft
    > Software engineering: http://www.galasoft-LB.ch
    > PhotoAlbum: http://www.galasoft-LB.ch/pictures
    > Support children in Calcutta: http://www.calcutta-espoir.ch
    >
    =?Utf-8?B?SmFzb24gU3RlYXJucw==?=, Nov 16, 2006
    #16
  17. Hi,

    Jason Stearns wrote:
    > Writing javascript to do x for one browser and y for another isn't hard, just
    > time consuming and requires good testing.


    Additionally, cross-browser coding is also not that hard, and more and
    more possible, except for minor functionalities like the one we're
    talking about.

    > But i don't think that any asp.net
    > application could be expected to run correctly with out javascript enabled on
    > the client side. As far as i'm concerned if you don't have javascript enabled
    > you're just not going to be able to function on today's web.


    I think that's true for thick clients. However, don't forget all the
    users (more and more each day) who access your page using mobile
    devices, where only a subset (at best) of JavaScript is available.
    Irrelevant point in our case, since the layout issue on a mobile device
    is totally different anyway.


    > rodchar, if i were you i would just read up on the w3c specs and do what
    > ever works for you. there's lots of documentation on the benefits of
    > tableless css design, but a table would fix this problem also.


    Pragmatism and compromise are the two most important attitudes in
    today's world of software engineering. I concur :)

    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
    Laurent Bugnion, Nov 17, 2006
    #17
  18. =?Utf-8?B?cm9kY2hhcg==?=

    darrel Guest

    > As far as i'm concerned if you don't have javascript enabled
    > you're just not going to be able to function on today's web.


    In reality, that's true. In theory, it shouldn't be.

    Javascript should always be treated as an 'enhancement' to the user
    experience...not a requirement.

    one of the major benefits of the web is the ability to make it accessible to
    a much wider audience than any other medium that has come before it. Even
    (oddly enough) Microsoft seems to be accepting this as the better way. It
    sounds like ASP.net 2.0 and Atlas not only now support a wider range of
    browsers, but Atlas has also been designed so that it can gracefully degrade
    for those without javascript if one builds the site correctly.

    -Darrel
    darrel, Nov 17, 2006
    #18
    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. Josef K.

    <label><div></div></label> allowed?

    Josef K., May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    13,399
    Josef K.
    May 22, 2005
  2. rbt

    deal or no deal

    rbt, Dec 22, 2005, in forum: Python
    Replies:
    7
    Views:
    542
    Duncan Smith
    Dec 28, 2005
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    743
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    185
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    307
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page