DIV - dynamic height

Discussion in 'HTML' started by nicnat, Apr 9, 2008.

  1. nicnat

    nicnat Guest

    I can do this easily with tables but I'm having difficulty trying to
    accomplish the same thing using just DIVs. As an example I'll give a simple
    design of a page with a header extending all the way across the top and two
    columns beneath it. The left column contains NAV information and has a
    background color. The right column has the page CONTENT and has a neutral
    (ie different) background and contains dynamic page information (ie the
    amount of information and thus the length of the column will vary). The
    information contained in the 2nd column (CONTENT) is inherently more than
    the information contained in the left (NAV) column. The desired effect is
    for both columns to have the same height and for the NAV border to extend
    the exact length of the page CONTENT.

    Using DIVs I can't seem to figure out how to make the height of the left
    column adjust to be the same height as the dynamic right hand column. Using
    tables its easy. All the columns will automatically scale to the same
    height. With DIVs, the column heights are independent of each other. The
    consequnce is that the content column is longer than the nav column.
    Because the nav column has a background color this difference in height is
    all too readily apparent.

    How can the desired effect (dynamic height for both columns) be achieved
    with DIVs? It's trival with tables and I thought it would be with DIVs.
    Stubborn as I am, I'm trying to figure this out. Any help?
     
    nicnat, Apr 9, 2008
    #1
    1. Advertising

  2. nicnat

    dorayme Guest

    In article <IWVKj.17525$>,
    "nicnat" <> wrote:

    > I can do this easily with tables but I'm having difficulty trying to
    > accomplish the same thing using just DIVs. As an example I'll give a simple
    > design of a page with a header extending all the way across the top and two
    > columns beneath it. The left column contains NAV information and has a
    > background color. The right column has the page CONTENT and has a neutral
    > (ie different) background and contains dynamic page information (ie the
    > amount of information and thus the length of the column will vary). The
    > information contained in the 2nd column (CONTENT) is inherently


    You say inherently?

    > more than
    > the information contained in the left (NAV) column. The desired effect is
    > for both columns to have the same height and for the NAV border to extend
    > the exact length of the page CONTENT.


    Inherently eh? OK, if it is inherent then I have just the ticket for you
    at

    <http://netweaver.com.au/floatHouse/page10.html>

    --
    dorayme
     
    dorayme, Apr 9, 2008
    #2
    1. Advertising

  3. nicnat

    nicnat Guest

    "dorayme" <> wrote in message
    news:...
    > In article <IWVKj.17525$>,
    > "nicnat" <> wrote:
    >
    >> I can do this easily with tables but I'm having difficulty trying to
    >> accomplish the same thing using just DIVs. As an example I'll give a
    >> simple
    >> design of a page with a header extending all the way across the top and
    >> two
    >> columns beneath it. The left column contains NAV information and has a
    >> background color. The right column has the page CONTENT and has a
    >> neutral
    >> (ie different) background and contains dynamic page information (ie the
    >> amount of information and thus the length of the column will vary). The
    >> information contained in the 2nd column (CONTENT) is inherently

    >
    > You say inherently?
    >
    >> more than
    >> the information contained in the left (NAV) column. The desired effect
    >> is
    >> for both columns to have the same height and for the NAV border to extend
    >> the exact length of the page CONTENT.

    >
    > Inherently eh? OK, if it is inherent then I have just the ticket for you
    > at
    >
    > <http://netweaver.com.au/floatHouse/page10.html>
    >
    > --
    > dorayme


    For purposes of my example, inherently simply means "all the time". :)
    Thanks for the refernece. I hadn't tried this technique. I copied the
    script from the example for Figure 3 and tried it out. Seems to work fine
    for the IE browser but Firefox doesn't display it correctly. Any idea why?
    Should it work consistently, this would be an acceptable solution.
     
    nicnat, Apr 9, 2008
    #3
  4. nicnat

    dorayme Guest

    In article <0YXKj.20406$>,
    "nicnat" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <IWVKj.17525$>,
    > > "nicnat" <> wrote:
    > >
    > >> I can do this easily with tables but I'm having difficulty trying to
    > >> accomplish the same thing using just DIVs. As an example I'll give a
    > >> simple
    > >> design of a page with a header extending all the way across the top and
    > >> two
    > >> columns beneath it. The left column contains NAV information and has a
    > >> background color. The right column has the page CONTENT and has a
    > >> neutral
    > >> (ie different) background and contains dynamic page information (ie the
    > >> amount of information and thus the length of the column will vary). The
    > >> information contained in the 2nd column (CONTENT) is inherently

    > >
    > > You say inherently?
    > >
    > >> more than
    > >> the information contained in the left (NAV) column. The desired effect
    > >> is
    > >> for both columns to have the same height and for the NAV border to extend
    > >> the exact length of the page CONTENT.

    > >
    > > Inherently eh? OK, if it is inherent then I have just the ticket for you
    > > at
    > >
    > > <http://netweaver.com.au/floatHouse/page10.html>
    > >
    > > --
    > > dorayme

    >
    > For purposes of my example, inherently simply means "all the time". :)



    It's ok, I knew what you meant. I was delighted to see it.

    > Thanks for the refernece. I hadn't tried this technique. I copied the
    > script from the example for Figure 3 and tried it out. Seems to work fine
    > for the IE browser but Firefox doesn't display it correctly. Any idea why?
    > Should it work consistently, this would be an acceptable solution.


    If you have copied the script from the caption figures, that is risky
    because those are a bit sketchy (you might have to look into the source
    code for the page which has to be the full mcCoy. It is hard to know
    quite what you have done without seeing your effort, why not post a url
    so we can see and sort it out. Should not be hard.

    That it works in IE 6 (you don't mention which version) is not great
    news in one sense, because under many conditions, IE 6 will grow height
    for a parent container as a matter of course without need for the
    overflow: hidden or auto on it.

    (Just btw, on this business of IE 6, in conditions where the parent does
    not grow height for its floated children (they are more common than I
    originally thought) it cannot be induced to do so by overflow: hidden.
    That is fairly well known I think. But I have noticed that it cannot be
    induced to do by a completely empty clearing div either (as with other
    modern browsers). The smallest content, a space will do, does the trick!
    There are other tricks too about width and height to jog IE into action.
    I will happily attend IE 6's funeral if it is ever announced. To make
    sure it is dead!)

    --
    dorayme
     
    dorayme, Apr 9, 2008
    #4
  5. nicnat

    nicnat Guest

    "dorayme" <> wrote in message
    news:...
    > In article <0YXKj.20406$>,
    > "nicnat" <> wrote:
    >
    >> "dorayme" <> wrote in message
    >> news:...
    >> > In article <IWVKj.17525$>,
    >> > "nicnat" <> wrote:
    >> >
    >> >> I can do this easily with tables but I'm having difficulty trying to
    >> >> accomplish the same thing using just DIVs. As an example I'll give a
    >> >> simple
    >> >> design of a page with a header extending all the way across the top
    >> >> and
    >> >> two
    >> >> columns beneath it. The left column contains NAV information and has
    >> >> a
    >> >> background color. The right column has the page CONTENT and has a
    >> >> neutral
    >> >> (ie different) background and contains dynamic page information (ie
    >> >> the
    >> >> amount of information and thus the length of the column will vary).
    >> >> The
    >> >> information contained in the 2nd column (CONTENT) is inherently
    >> >
    >> > You say inherently?
    >> >
    >> >> more than
    >> >> the information contained in the left (NAV) column. The desired
    >> >> effect
    >> >> is
    >> >> for both columns to have the same height and for the NAV border to
    >> >> extend
    >> >> the exact length of the page CONTENT.
    >> >
    >> > Inherently eh? OK, if it is inherent then I have just the ticket for
    >> > you
    >> > at
    >> >
    >> > <http://netweaver.com.au/floatHouse/page10.html>
    >> >
    >> > --
    >> > dorayme

    >>
    >> For purposes of my example, inherently simply means "all the time". :)

    >
    >
    > It's ok, I knew what you meant. I was delighted to see it.
    >
    >> Thanks for the refernece. I hadn't tried this technique. I copied the
    >> script from the example for Figure 3 and tried it out. Seems to work
    >> fine
    >> for the IE browser but Firefox doesn't display it correctly. Any idea
    >> why?
    >> Should it work consistently, this would be an acceptable solution.

    >
    > If you have copied the script from the caption figures, that is risky
    > because those are a bit sketchy (you might have to look into the source
    > code for the page which has to be the full mcCoy. It is hard to know
    > quite what you have done without seeing your effort, why not post a url
    > so we can see and sort it out. Should not be hard.
    >
    > That it works in IE 6 (you don't mention which version) is not great
    > news in one sense, because under many conditions, IE 6 will grow height
    > for a parent container as a matter of course without need for the
    > overflow: hidden or auto on it.
    >
    > (Just btw, on this business of IE 6, in conditions where the parent does
    > not grow height for its floated children (they are more common than I
    > originally thought) it cannot be induced to do so by overflow: hidden.
    > That is fairly well known I think. But I have noticed that it cannot be
    > induced to do by a completely empty clearing div either (as with other
    > modern browsers). The smallest content, a space will do, does the trick!
    > There are other tricks too about width and height to jog IE into action.
    > I will happily attend IE 6's funeral if it is ever announced. To make
    > sure it is dead!)
    >
    > --
    > dorayme


    I'm running IE7 and Firefox 2.0.0.13. Both are the latest versions.
    The following is the web page script in question:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>

    <!-- Fig 3. This one allows the columns to grow wider with text size
    changes: -->
    <div style="width: 30em; background: #ffc;">
    <div style="float:right; width: 15em; border-left: .1em solid #000;
    background: #cfc;">
    <p>This column has a green background and is the longest of the two.</p>
    <p>If the parent were to have a different coloured background to
    .....</p></div>
    <p>In this example, only to show it can be done, the text is in a paragraph
    element. ...</p></div>

    </body>
    </html>

    When uploaded to my web host it produces completely different results in IE7
    and in FF. In IE 7 it will produce the desired effect as discussed and
    shown in the link you provided
    (http://netweaver.com.au/floatHouse/page10.html), Fig 3. In FF this same
    HTML document produces the less than desired effect of two columns with
    unequal heights.

    As the desired effect is very easily accomplished with tables, I should
    stick with that. For completeness I provide sample HTML code which produces
    the desired effect using any browser I've tried:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>

    <table>
    <tr><td style="background-color:#ffc;width:15em;vertical-align:top">
    <p>In this example, only to show it can be done, the text is in a paragraph
    element. ...</p></td>
    <td style="background-color:#cfc;width:15em;vertical-align:top">
    <p>This column has a green background and is the longest of the two.</p><br
    />
    <p>If the parent were to have a different coloured background to ....</p>
    </td></tr>
    </table>

    </body>
    </html>

    I only started this thread because I was trying to learn a "tableless" way
    to accomplish a rather routine task. The Floating DIV concept was one I
    hadn't even considered but it doesn't seem to work consistently.
    </Thanks>
    nicnat
     
    nicnat, Apr 9, 2008
    #5
  6. nicnat

    dorayme Guest

    In article <zz7Lj.17885$>,
    "nicnat" <> wrote:
    > "dorayme" <> wrote in message
    > > "nicnat" <> wrote:



    > >> >> The desired effect is
    > >> >> for both columns to have the same height and for the NAV border to
    > >> >> extend the exact length of the page CONTENT.
    > >> > <http://netweaver.com.au/floatHouse/page10.html>


    > >> Thanks for the refernece. I hadn't tried this technique. I copied the
    > >> script from the example for Figure 3 and tried it out. Seems to work
    > >> fine
    > >> for the IE browser but Firefox doesn't display it correctly. Any idea
    > >> why?


    > > If you have copied the script from the caption figures, that is risky
    > > because those are a bit sketchy (you might have to look into the source
    > > code for the page ... why not post a url
    > > so we can see and sort it out. Should not be hard.
    > >


    > <!-- Fig 3. This one allows the columns to grow wider with text size
    > changes: -->
    > <div style="width: 30em; background: #ffc;">

    [code snipped]
    >
    > When uploaded to my web host it produces completely different results in IE7
    > and in FF. In IE 7 it will produce the desired effect as discussed and
    > shown in the link you provided
    > (http://netweaver.com.au/floatHouse/page10.html), Fig 3. In FF this same
    > HTML document produces the less than desired effect of two columns with
    > unequal heights.
    >

    ....

    As I thought, you have copied the caption code without grabbing the
    *crucial* thing that is needed to make it work in good browsers like FF.
    If you look at the caption code, there is a big clue in class="nuclear"
    for the wrapper or parent div. The css for "nuclear" is overflow:
    hidden. You have simply dropped the class from the code you submit here
    and not compensated for it.

    I wrote that set of pages not with "tutorial" in mind but more to think
    through and discuss a few issues. The significance of the parent having
    a class perhaps needs you to have read the previous page or two.

    So, instead of your:

    <div style="width: 30em; background: #ffc;">

    use

    <div style="width: 30em; background: #ffc; overflow: hidden;">

    If you read the previous pages, you will see there are other techniques.
    You can use clearing divs... But the above should be good for your
    stated purposes.


    > I only started this thread because I was trying to learn a "tableless" way
    > to accomplish a rather routine task. The Floating DIV concept was one I
    > hadn't even considered but it doesn't seem to work consistently.


    It should work for you if you follow the above. But thank you for this
    as it alerts me to the misunderstanding caused, I will now alter the
    code displayed in caption Fig. 3 and remove the class and substitute the
    crucial bit in the inline style.

    --
    dorayme
     
    dorayme, Apr 9, 2008
    #6
  7. nicnat

    nicnat Guest

    > As I thought, you have copied the caption code without grabbing the
    > *crucial* thing that is needed to make it work in good browsers like FF.
    > If you look at the caption code, there is a big clue in class="nuclear"
    > for the wrapper or parent div. The css for "nuclear" is overflow:
    > hidden. You have simply dropped the class from the code you submit here
    > and not compensated for it.
    >
    > I wrote that set of pages not with "tutorial" in mind but more to think
    > through and discuss a few issues. The significance of the parent having
    > a class perhaps needs you to have read the previous page or two.
    >
    > So, instead of your:
    >
    > <div style="width: 30em; background: #ffc;">
    >
    > use
    >
    > <div style="width: 30em; background: #ffc; overflow: hidden;">
    >
    > If you read the previous pages, you will see there are other techniques.
    > You can use clearing divs... But the above should be good for your
    > stated purposes.
    >
    >
    >> I only started this thread because I was trying to learn a "tableless"
    >> way
    >> to accomplish a rather routine task. The Floating DIV concept was one I
    >> hadn't even considered but it doesn't seem to work consistently.

    >
    > It should work for you if you follow the above. But thank you for this
    > as it alerts me to the misunderstanding caused, I will now alter the
    > code displayed in caption Fig. 3 and remove the class and substitute the
    > crucial bit in the inline style.
    >
    > --
    > dorayme



    Yes! Adding "overflow:hidden" to the style for the leading DIV makes this
    work for FF and IE. Very interesting. Thanks.
     
    nicnat, Apr 10, 2008
    #7
  8. nicnat

    morningsunshine

    Joined:
    Apr 9, 2009
    Messages:
    1
    Links Broken

    Hi, I am trying to solve a similar problem but the link to the solution is broken. Can you post your answer here please?
     
    morningsunshine, Apr 9, 2009
    #8
    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. Jensen bredal

    Dynamic div height

    Jensen bredal, Sep 19, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    20,006
    Jensen bredal
    Sep 19, 2005
  2. HJ
    Replies:
    5
    Views:
    901
    Jonathan N. Little
    Sep 1, 2006
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    892
    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:
    171
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    140
Loading...

Share This Page