SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple dynamically-sized boxes?

    Hi,

    I've been banging my head against the wall for several days trying to produce CSS for a complicated layout, and I could really use some help from a guru. Attached is a simplified (and eye-popping) mockup of the layout. The requirements for the layout are thus:

    purple: the main window
    green: dynamic content of variable height. must not scroll or clip.
    red: height = purple.height - green.height
    yellow: fixed height items, not really an issue
    blue: dynamic content of variable size. this box must scroll

    I have emphasized the red box, because that seems to be the wall i'm hitting. if i could get the browser to assign the proper height to the red box, then i can use absolute (oh noes!) positioning for yellow and, more importantly, blue.

    I have a basic structure, but could really use some help filling in the blanks:

    Code:
    #purple { position: relative; height: 100%; }
    #green { position: relative; }
    #red { /* oh noes! */ }
    
    /* yellow assumes that its bound by red, not purple */
    .yellow {
      position: absolute;
      height: 10px;
    }
    #yellow1 { top: 0px; }
    #yellow2 { top: 10px; }
    #yellow3 { bottom: 0px; }
    
    /* blue assumes that its bound by red, not purple */
    #blue {
      position: absolute;
      top: 20px;
      bottom: 10px;
    }
    Thanks for any help!
    -w
    Attached Images Attached Images

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think floats might be more appropriate than positioning here.

    What does the HTML you have look like?

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the html, but i'm willing to change it if i can get green, yellow and blue to all show up correctly.

    Code:
    <div id="purple">
      <div id="green"></div>
      <div id="red">
        <div id="yellow1" class="yellow"></div>
        <div id="yellow2" class="yellow"></div>
        <div id="blue"></div>
        <div id="yellow3" class="yellow"></div>
      </div>
    </div>
    thanks!
    -w

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you mean that you want the whole thing to be only viewport height at all times then I don't think what you want is possible.

    The nearest you could get would be something like this where the top part is a known height.

    http://www.pmob.co.uk/temp/one-scrollable-div.htm

    If the blue content could extend pass the bottom of the viewport without the need for a scrollbar other than on the viewport then it would similar to my 3 col demos.

    http://www.pmob.co.uk/temp/3col-centred-template.htm

    If I've understood you correctly then I don't think this can be accomplished without scripting.

  5. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If I've understood you correctly then I don't think this can be accomplished without scripting.
    That's what I was afraid of. Thanks though.
    -w


Bookmarks

Posting Permissions

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