SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    have blocks fill 100% in equal columns

    Hey,
    I can't think of possible way to solve this one, so I want to ask the CSS gurus out there for an advice:
    I have 2 equal columns, no biggie I've done this before thanks to Matthew.

    Problem is that this time the columns are made of several boxes each. So there is no single column that has a background color and that's it, I need to actually make sure the child elements fill 100% height.

    Here is a brief description in code (I didn't implement Matthews method to avoid confusion, just presented the structure):
    Code:
    <div id="container">
       <div id="sidebar">
          <div class="box">login goes here</div>
          <div class="box stretching">news go here</div>
          <div class="box">ad goes here</div>
       </div>
       <div id="main">
          <div class="box stretching">content goes here</div>
          <div class="box">footer goes here</div>
       </div>
    </div>
    I think a good way would be to designate one box in each column as the "stretching" box, and have it stretch to 100%, other boxes will have fixed height and positioned absolutely in the padded areas of the columns.

    But the containers stretch to fit the content, so a child element with 100% height just wont fill the gap.

    Please help

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    How many column colors do you want here?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 2 columns themselves have no background colors, the blocks that fill the columns do.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main issue is height:100% requires parent element to have specified height. But you can't have an element with specified height expanding to fit content.

    If there's was a way to override that, than it would be possible. But since percentage height requires parent height to be specified we need a different approach.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You could just throw in the towel and use JavaScript, if all else fails.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As much as I hate this, it looks like that is what I'll have to do.

    I wish there was a better solution to that.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am having a problem visualizing what you are trying to achieve. are you saying you want the CHILD blocs to be 100% height total for each column??

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. But i think it is best that only one of them should be liquid.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ok, am still a bit lost ( am thinking VERTICALLY)

    you can assign the colors you need, and the LAST CHILD would match the color of its parent container. at that point the illusion of equal height columns would not be broken.

    <div id="container color1">
    <div id="sidebar">
    <div class="box">login goes here</div>
    <div class="box stretching">news go here</div>
    <div class="box color1">ad goes here</div>
    </div>
    <div id="main color2">
    <div class="box stretching">content goes here</div>
    <div class="box color2">footer goes here</div>
    </div>
    </div>

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

    As Dresden said above you can colour the top blocks or rub out the background and the the last box shows the background to the bottom.

    Here's a very rough mock up code below (using my absolute column technique) to show a similar method.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Equal columns - Including IE6</title>
    <style type="text/css">
    .row {
        width:600px;
        position:relative;
        float:left;
        clear:left;
        margin:0 0 10px;
    }
    .row p {
        margin:0px 0 10px;
        height:100px;
        background:red;
    }
    /* .box cannot be position:relative or this won't work */
    /* use an inner if stacking context needed but leave .bg outside */
    .box {
        width:150px;
        margin:0 50px 0 0;
        display:inline;
        float:left;
    }
    /* if you don't want an inner then use this instead
    .box * {
        position:relative;
        z-index:2;
    }
    */
    .inner {
        position:relative;
        z-index:2;
        width:150px;
    }
    .inner div {
        background:#fff;
        padding:1px 0 10px;
        width:150px;
    }
    .inner div.last{padding-bottom:0;}
    .box .bg {
        width:150px;
        background:red;
        position:absolute;
        top:0;
        bottom:0;
        z-index:1;
    }
    .inner .bg2 p,.row .box .bg2{background:blue}
    .inner .bg3 p,.row .box .bg3{background:green}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    * html .row{overflow:hidden}
    * html .box .bg{
        top:auto;
        bottom:0;
        height:999em;
    }
    
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="row">
        <div class="box">
            <div class="inner">
                <div>
                    <p>test</p>
                </div>
                <div>
                    <p>test</p>
                </div>
                <div class="last">
                    <p>test</p>
                </div>
            </div>
            <div class="bg"></div>
        </div>
        <div class="box">
            <div class="inner">
                <div>
                    <p>test</p>
                </div>
                <div>
                    <p>test</p>
                </div>
                <div>
                    <p>test</p>
                </div>
                <div>
                    <p>test</p>
                </div>
                <div>
                    <p>test</p>
                </div>
                <div class="last bg2">
                    <p>test</p>
                </div>
            </div>
            <div class="bg bg2"></div>
        </div>
        <div class="box">
            <div class="inner">
                <div>
                    <p>test</p>
                </div>
                <div>
                    <p>test</p>
                </div>
                <div class="last bg3">
                    <p>test</p>
                </div>
            </div>
            <div class="bg bg3"></div>
        </div>
    </div>
    </body>
    </html>

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    OK, I came up with a technique (while making breakfast),
    I'll post a link when I test it, and then go through details on how I've done it.
    Stay tuned...


Tags for this Thread

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
  •