ansaurus

Question

Answer 1

A:

You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/

Temple 2009-05-11 05:33:30

how is this not helpful? The link contains a solution to the problem. You can see it working here: http://www.alistapart.com/d/multicolumnlayouts/2ColFixedRightContentTallest.html

Temple 2009-05-11 07:05:04

Answer 2

+1 A:

You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.

You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.

The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.

There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.

Kekoa 2009-05-11 05:59:37

Give the parent a height (however you like), and `position: relative`; then specify the child with a `position: absolute` (and top: and bottom: of 0) and it can fill it's parent's height. It's not necessarily pretty though..

David Thomas 2009-05-11 06:39:33

Answer 3

+1 A:

I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):

#wrapper
    {position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: #ffa;
     }

#right {position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 15%; /*  this has to be fixed-size so you can account
      for it in the next bit; but can still be kinda
      fluid-ish... */
    display: block;
    background-color: #ccc;
    overflow: auto;
     }

#left   {width: 83%; /*  100 - (15% + 2% (for a gutter)) */
    margin-left: 1%;
        margin-right: 16%; /*   less than 100 - 83, to allow for rounding of % or px */
    display: block;
    background-color: #0ff;
    overflow: auto;
     }

p   {display: block;
    margin: 0.5em;
    padding: 0.2em 0.5em;
     }

...

<body>

    <div id="wrapper">

        <div id="left">
            <p>The left-hand content</p>

        </div>

        <div id="right">
            <p>The right-hand content</p>
        </div>

    </div>

</body>

It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)

Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.

(Okay, I lied: I clearly have tried it now...)

David Thomas 2009-05-11 06:36:32

Answer 4

A:

Hi,

Here is the way I have found to solve this issue:

You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.

First, add and style the elements in your stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!

Libby 2010-08-23 15:43:30

ansaurus

tags:

views:

answers:

Extending sidebar down page

related questions