DIVs of Equal Height

Discussion in 'HTML' started by Matt White, Aug 6, 2008.

  1. Matt White

    Matt White Guest

    I am creating a content pane (div) that contains a left pane (div) and
    a right pane (div). The left pane contains the bulk of the page's
    information while the right pane holds navigational and other links.
    The overall content pane expands (as it should) as the left pane gets
    longer. However, the right pane, which contains less information, is
    then significantly shorter than the left pane. I would like the right
    pane to expand with the left pane whether there is content to fill in
    the empty space or not. How can I achieve this effect? To help
    illustrate, here's a basic outline of what I have:

    <div id="content">
    <div id="left_pane">
    Page information here
    As this pane gets longer and fills the page, the navigation pane
    to the right should also get longer.
    </div>
    <div id="right_pane">
    Navigation links here
    </div>
    </div>
     
    Matt White, Aug 6, 2008
    #1
    1. Advertising

  2. Matt White

    Nik Coughlin Guest

    "Matt White" <> wrote in message
    news:...
    >I am creating a content pane (div) that contains a left pane (div) and
    > a right pane (div). The left pane contains the bulk of the page's
    > information while the right pane holds navigational and other links.
    > The overall content pane expands (as it should) as the left pane gets
    > longer. However, the right pane, which contains less information, is
    > then significantly shorter than the left pane. I would like the right
    > pane to expand with the left pane whether there is content to fill in
    > the empty space or not. How can I achieve this effect? To help
    > illustrate, here's a basic outline of what I have:
    >
    > <div id="content">
    > <div id="left_pane">
    > Page information here
    > As this pane gets longer and fills the page, the navigation pane
    > to the right should also get longer.
    > </div>
    > <div id="right_pane">
    > Navigation links here
    > </div>
    > </div>


    http://nrkn.com/3ColEqual/
    http://nrkn.com/3ColEqualPositioned/

    I believe I have a slightly better technique for doing this now but not up
    on my test site so I can't post right now, will look into it later
     
    Nik Coughlin, Aug 7, 2008
    #2
    1. Advertising

  3. Matt White

    dorayme Guest

    In article
    <>,
    Matt White <> wrote:

    > I am creating a content pane (div) that contains a left pane (div) and
    > a right pane (div). The left pane contains the bulk of the page's
    > information while the right pane holds navigational and other links.
    > The overall content pane expands (as it should) as the left pane gets
    > longer. However, the right pane, which contains less information, is
    > then significantly shorter than the left pane. I would like the right
    > pane to expand with the left pane whether there is content to fill in
    > the empty space or not. How can I achieve this effect? To help
    > illustrate, here's a basic outline of what I have:
    >
    > <div id="content">
    > <div id="left_pane">
    > Page information here
    > As this pane gets longer and fills the page, the navigation pane
    > to the right should also get longer.
    > </div>
    > <div id="right_pane">
    > Navigation links here
    > </div>
    > </div>


    There are many ways to skin this cat. These URLs might give you some
    ideas:

    <http://dorayme.890m.com/alt/twoCol.html>

    <http://netweaver.com.au/alt/stickyFooterWithMarkUp.html>

    and a few other mechanisms at

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

    --
    dorayme
     
    dorayme, Aug 7, 2008
    #3
  4. Matt White

    richard Guest

    On Wed, 6 Aug 2008 15:30:40 -0700 (PDT), Matt White
    <> wrote:

    >I am creating a content pane (div) that contains a left pane (div) and
    >a right pane (div). The left pane contains the bulk of the page's
    >information while the right pane holds navigational and other links.
    >The overall content pane expands (as it should) as the left pane gets
    >longer. However, the right pane, which contains less information, is
    >then significantly shorter than the left pane. I would like the right
    >pane to expand with the left pane whether there is content to fill in
    >the empty space or not. How can I achieve this effect? To help
    >illustrate, here's a basic outline of what I have:
    >
    ><div id="content">
    > <div id="left_pane">
    > Page information here
    > As this pane gets longer and fills the page, the navigation pane
    >to the right should also get longer.
    > </div>
    > <div id="right_pane">
    > Navigation links here
    > </div>
    ></div>



    Put both div's into a container then give both a height of 100%.
    This will also help keep the floated div's from breaking.
     
    richard, Aug 7, 2008
    #4
  5. Matt White

    Nico Schuyt Guest

    Matt White wrote:
    > I am creating a content pane (div) that contains a left pane (div) and
    > a right pane (div). The left pane contains the bulk of the page's
    > information while the right pane holds navigational and other links.
    > The overall content pane expands (as it should) as the left pane gets
    > longer. However, the right pane, which contains less information, is
    > then significantly shorter than the left pane. I would like the right
    > pane to expand with the left pane whether there is content to fill in
    > the empty space or not. How can I achieve this effect?


    Use a table (one row, two cells) instead of div's

    --
    Nico
     
    Nico Schuyt, Aug 7, 2008
    #5
  6. Matt White

    Matt White Guest

    On Aug 7, 12:57 am, "Nico Schuyt" <nschuyt(AT)gmail(DOT)com> wrote:
    > Matt White wrote:
    > > I am creating a content pane (div) that contains a left pane (div) and
    > > a right pane (div). The left pane contains the bulk of the page's
    > > information while the right pane holds navigational and other links.
    > > The overall content pane expands (as it should) as the left pane gets
    > > longer. However, the right pane, which contains less information, is
    > > then significantly shorter than the left pane. I would like the right
    > > pane to expand with the left pane whether there is content to fill in
    > > the empty space or not. How can I achieve this effect?

    >
    > Use a table (one row,  two cells) instead of div's
    >
    > --
    > Nico


    I'd have to say the table is the easiest solution. Tables can be
    annoying sometimes but trying to do this with divs is not as simple as
    I thought. Thanks.
     
    Matt White, Aug 7, 2008
    #6
  7. Matt White

    dorayme Guest

    In article
    <>,
    Matt White <> wrote:

    > On Aug 7, 12:57 am, "Nico Schuyt" <nschuyt(AT)gmail(DOT)com> wrote:
    > > Use a table (one row,  two cells) instead of div's
    > >
    > > --
    > > Nico

    >
    > I'd have to say the table is the easiest solution. Tables can be
    > annoying sometimes but trying to do this with divs is not as simple as
    > I thought. Thanks.


    If you know your content is taller than your navigation, it is easy and
    stable to do similar to what is shown at

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

    Why would this be any problem for you? Perhaps it is not as simple
    initially in concept as a table, I agree. But you can get to a stage
    where this looks pretty simple, just like a juggler who is mastering 11
    balls looks back to how 3 balls were a big step from 2.

    (Naturally, you have to give different widths and margins for your
    purposes)

    --
    dorayme
     
    dorayme, Aug 7, 2008
    #7
  8. Matt White

    Matt White Guest

    On Aug 7, 4:06 pm, dorayme <> wrote:
    > In article
    > <>,
    >  Matt White <> wrote:
    >
    > > On Aug 7, 12:57 am, "Nico Schuyt" <nschuyt(AT)gmail(DOT)com> wrote:
    > > > Use a table (one row,  two cells) instead of div's

    >
    > > > --
    > > > Nico

    >
    > > I'd have to say the table is the easiest solution. Tables can be
    > > annoying sometimes but trying to do this with divs is not as simple as
    > > I thought. Thanks.

    >
    > If you know your content is taller than your navigation, it is easy and
    > stable to do similar to what is shown at
    >
    > <http://netweaver.com.au/floatHouse/page10.html>
    >
    > Why would this be any problem for you? Perhaps it is not as simple
    > initially in concept as a table, I agree. But you can get to a stage
    > where this looks pretty simple, just like a juggler who is mastering 11
    > balls looks back to how 3 balls were a big step from 2.
    >
    > (Naturally, you have to give different widths and margins for your
    > purposes)
    >
    > --
    > dorayme


    Because I can't guarantee the content is longer than the side bar. In
    fact, I have several pages where it isn't and those solutions just
    weren't ideal for all situations that I came across. The table does
    have some small issues but they were easy to work around and it
    resizes beautifully no matter which column has more content.
     
    Matt White, Aug 8, 2008
    #8
  9. Matt White

    dorayme Guest

    In article
    <>,
    Matt White <> wrote:

    > On Aug 7, 4:06 pm, dorayme <> wrote:
    > > In article
    > > <>,
    > >  Matt White <> wrote:
    > >
    > > > On Aug 7, 12:57 am, "Nico Schuyt" <nschuyt(AT)gmail(DOT)com> wrote:
    > > > > Use a table (one row,  two cells) instead of div's

    > >
    > > > > --
    > > > > Nico

    > >
    > > > I'd have to say the table is the easiest solution. Tables can be
    > > > annoying sometimes but trying to do this with divs is not as simple as
    > > > I thought. Thanks.

    > >
    > > If you know your content is taller than your navigation, it is easy and
    > > stable to do similar to what is shown at
    > >
    > > <http://netweaver.com.au/floatHouse/page10.html>
    > >
    > > Why would this be any problem for you? Perhaps it is not as simple
    > > initially in concept as a table, I agree. But you can get to a stage
    > > where this looks pretty simple, just like a juggler who is mastering 11
    > > balls looks back to how 3 balls were a big step from 2.
    > >
    > > (Naturally, you have to give different widths and margins for your
    > > purposes)


    > Because I can't guarantee the content is longer than the side bar. In
    > fact, I have several pages where it isn't and those solutions just
    > weren't ideal for all situations that I came across. The table does
    > have some small issues but they were easy to work around and it
    > resizes beautifully no matter which column has more content.


    OK that is fair enough reason. But, in that case, you might be
    interested in a very simple method of making two cols that does not
    involve knowing which has the most content. let me make a page 11:

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

    I have been meaning to make it for a while but now it's weekend and no
    risk of clients demanding deadlines, you force my hand... <g>

    Not that I really want to force you away from table use for simple
    columning purposes, it is no big crime. But you can get into the frame
    of mind where you feel a bit naughty doing it, its an old Catholic thing
    that life should not be so easy and if it is, you are sinning!

    Just one thing, as I have just done page 11, I may have to re proof-read
    it later...

    --
    dorayme
     
    dorayme, Aug 9, 2008
    #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. Nik Coughin
    Replies:
    9
    Views:
    613
    Nik Coughlin
    Nov 30, 2004
  2. rich
    Replies:
    0
    Views:
    724
  3. Nik Coughlin
    Replies:
    0
    Views:
    657
    Nik Coughlin
    May 15, 2007
  4. Fister
    Replies:
    21
    Views:
    882
    Neredbojias
    Jan 7, 2008
  5. maya
    Replies:
    4
    Views:
    243
Loading...

Share This Page