www.webdeveloper.com
Results 1 to 8 of 8

Thread: Interdependent DIVs

  1. #1
    Join Date
    Feb 2004
    Posts
    178

    Interdependent DIVs

    Anyone know a way to make 2 interdependent DIVS, side by side? I can do the side by side thing but how about interdependency? You know, text in either one causes them both to get taller. This seems to be a very basic building block to getting around using tables.

  2. #2
    Join Date
    Jul 2003
    Location
    Japan
    Posts
    380
    hmm....maybe you should try giving them a container....like this:

    Code:
    <div id="container">
    <div id="left">
    blah
    <br />
    blah
    <br />
    blah
    </div>
    <div id="right">
    blah
    </div>
    </div>

    and then some css

    Code:
    div#container
    {
    height: auto;
    width: 100%;
    }
    div#left
    {
    float: left;
    height: 100%;
    width: 50%;
    }
    div#right
    {
    float: right;
    height: 100%;
    width: 50%;
    }
    that way, when the container expands in height, so will the two contents since their heights are set to 100%....

    i im pretty sure that should help

    [[[terminal]]]

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  4. #4
    Join Date
    Feb 2004
    Posts
    178
    I thought about the 100% height but I just thought that wasn't very well supported. I'll tinker, thanks.

  5. #5
    Join Date
    Feb 2004
    Posts
    178
    Originally posted by toicontien
    You may be interested in Faux Columns at A List Apart.
    Thanks, but I actually need the columns to stretch, not the appearance of stretching through bg images...

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This is a 3 column layout, but should be adaptable for 2 column.

  7. #7
    Join Date
    Feb 2004
    Posts
    178
    Originally posted by Fang
    This is a 3 column layout, but should be adaptable for 2 column.
    Thanks. There's some other similar ones out there as well...
    pie
    pixy
    lavatop

    I'm gonna check this out a bit and see if it helps:
    pie lily pad

  8. #8
    Join Date
    Feb 2004
    Posts
    178
    Here is a mockup of how the page should work. It's "pretty much done" except for "D" and "E" on the mockup. "D" has a right margin and "E" (a fixed width area) is floated in that margin, which of course means it's not in the flow, so it's not forcing "D" to get taller when it has more content than "D". "D" has a blue background that needs to fill in - "D" is fluid and I will never know it's dimensions.

    mockup

    For now, to get this done I've had to make D+E a table to get the desired effect. Maybe if D and E were percentage widths I wouldn't need to float E? I think E floating is the problem...

    edit: FYI, I cannot use absolute position in this except in an instance like a skipnav where that declaration is used to simply take something out of the flow, not to actually position it.
    Last edited by TimeBandit; 04-18-2004 at 03:13 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles