Synch two heights

Discussion in 'HTML' started by sfeher@gmail.com, Jul 12, 2006.

  1. Guest

    Hi All,

    I am having trouble big times figuring out a way of forcing a DIV to be
    in synch with another DIV's height in a (mostly vertically) fluid
    layout in a web app context. The first one has overflow-x:auto; and a
    width set but not a height as I want it to vertically grow with the
    text inside.

    Basically I would like the same height for the second one. I care less
    if it is CSS, tables or Javascript but I would prefer the solution to
    work on both IE6 & FF1.5.

    Trying to fix the height with Javascript works ok except when font size
    changes and the heights go out of sync. I found little information on
    how to handle this case.
    http://groups.google.com/group/comp...hange font size&rnum=2&hl=en#d9a3a8e3e2ef47d0

    A second question, not directly related to what I said so far is about
    overflow.
    Is there any way of enforcing overflow:auto in IE without having to
    specify exactly width/height - e.g. use the parents height
    (width:100%)? This would fix all my problems including the one from my
    first question.

    Here's a stripped down version of my code: (it's for a virtual grid
    where the the vertical scrolling is faked and the content of the
    control gets replaced real-time)

    <html>
    <head>
    <style>
    div
    {
    margin:0px;padding:0px;
    }
    .container
    {
    width:420px;
    background:green;
    }
    .scrollbar
    {
    float:right; overflow:auto;
    height:200px; width:16px;
    background:eek:range;
    }
    .content
    {
    width:401px;
    overflow-x:auto;
    background:#f0f0c0;
    }
    .nowrap
    {
    white-space: nowrap;
    width:700px;
    }
    </style>
    </head>
    <body>

    <div class="container">
    <div class="scrollbar"><div
    style="height:1000px;background:red;"></div></div>
    <div class="content">
    <div class="nowrap">Row1</div>
    <div class="nowrap">Row2</div>
    <div class="nowrap" style="text-align:right">Row3</div>
    <div class="nowrap">Row4</div>
    <div class="nowrap">Row5</div>
    <div class="nowrap">Row6</div>
    <div class="nowrap">Row7</div>
    </div>
    <div style="clear:both">
    </div>
    </body>
    </html>

    Regards,
    Sebastian
     
    , Jul 12, 2006
    #1
    1. Advertising

  2. Brian Cryer Guest

    <> wrote in message
    news:...
    > Hi All,
    >
    > I am having trouble big times figuring out a way of forcing a DIV to be
    > in synch with another DIV's height in a (mostly vertically) fluid
    > layout in a web app context. The first one has overflow-x:auto; and a
    > width set but not a height as I want it to vertically grow with the
    > text inside.
    >
    > Basically I would like the same height for the second one. I care less
    > if it is CSS, tables or Javascript but I would prefer the solution to
    > work on both IE6 & FF1.5.
    >
    > Trying to fix the height with Javascript works ok except when font size
    > changes and the heights go out of sync. I found little information on
    > how to handle this case.
    > http://groups.google.com/group/comp...hange font size&rnum=2&hl=en#d9a3a8e3e2ef47d0


    I hate to say it, but you could try using a table rather than div's. A table
    with one row and two columns will automatically have both cells the same
    height. Of course if you want both to be the same height and yet one under
    the other then tables won't help.

    --
    Brian Cryer
    www.cryer.co.uk/brian
     
    Brian Cryer, Jul 13, 2006
    #2
    1. Advertising

  3. Mark Eggers Guest

    wrote:
    > Hi All,
    >
    > I am having trouble big times figuring out a way of forcing a DIV to be
    > in synch with another DIV's height in a (mostly vertically) fluid
    > layout in a web app context. The first one has overflow-x:auto; and a
    > width set but not a height as I want it to vertically grow with the
    > text inside.


    Hard to tell what you want without a url or at least a graphic markup
    of what you want.

    However, does the following article match your needs?

    http://www.alistapart.com/articles/fauxcolumns/

    /mde/
    just some random thoughts . . . .
     
    Mark Eggers, Jul 13, 2006
    #3
    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. =?Utf-8?B?Sm9u?=

    Timeout Value Not In Synch With Error Message

    =?Utf-8?B?Sm9u?=, Aug 30, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    350
    =?Utf-8?B?Sm9u?=
    Aug 30, 2005
  2. Jan Limpens
    Replies:
    0
    Views:
    392
    Jan Limpens
    Sep 24, 2006
  3. moko

    Offline synch using XML web-services

    moko, Feb 16, 2004, in forum: ASP .Net Web Services
    Replies:
    0
    Views:
    106
  4. Greg Hauptmann
    Replies:
    0
    Views:
    91
    Greg Hauptmann
    Sep 14, 2009
  5. adi2293
    Replies:
    0
    Views:
    429
    adi2293
    Oct 17, 2012
Loading...

Share This Page