Sidebar 100% height

[csbartus]

ahoy,

i was looking on forum posts for a solution, there are many links to
external pages, i've tried all those techniques but none works for me.

i have the following structure in a Wordpress blog:

<div class="container">
<div id="header">...
<div id="content"> ...
<div id="sidebar"> ...
<div id="footer"> ...
</div>

how i can stretch sidebar height down to footer when content height is
always bigger than the sidebar?
i would be very thankful for a working example.

[Goulven CHAMPENOIS]

Ahoj,

how i can stretch sidebar height down to footer when content height is
always bigger than the sidebar?

The fauxcolumn technique (http://www.alistapart.com/articles/fauxcolumns/) works very well. It uses a background-image that repeats vertically inside the container. This background image simulates full-height columns.
Another alternative is faux absolute positionning (http://www.alistapart.com/articles/fauxabsolutepositioning/) but it only works with color fills, not background-image (a bit heavy on the markup side, so I've never tested it myself).

For now, it is impossible to force a block to have the same height as another unless the former is contained in the latter. All techniques work around this by wrapping content and sidebar in a container div and clearing them to ensure that the container div has a height (which will be equal to the content or sidebar, whichever is tallest).

The CSS3 layout module should give us ways to achieve that kind of layout without the extra markup, but it isn't usable yet, unfortunately.

In most cases, the FauxColumn tecnique is just what you need.

Hope that helps.
--
Goulven Champenois

[garethjmsaunders]

Another option, and one that I've used on a couple of sites is to use
the jQuery JavaScript library plugin called EqualizeCols by Tom
Deater:

http://www.tomdeater.com/jquery/equalize_columns/

Gareth

[csbartus]

sorry for this off topic post, i thought blueprint might reset
something that's why i can't set the height of the columns.
i've tried the solution using the background color, it works now but
overflows the footer, so it's ugly again ... however i'm presenting
the solution here for help.

faux absolute positionning:

.container {
overflow: hidden;
....
}

#sidebar {
margin-bottom: -5000px;
padding-bottom: 5000px;
....
}


[it's amazing how weak are these browser technologies in 2009 ... i'm
spending 90% on design 10% on coding ... and the worst is i have no
flow in tweaking css ... at the evening when i look back and see on
what i've spent a whole day is very scarryyy ]

[Jon Trelfa]

On Mon, Mar 23, 2009 at 8:39 AM, Goulven CHAMPENOIS <goul...@gmail.com> wrote:

Ahoj,

how i can stretch sidebar height down to footer when content height is
always bigger than the sidebar?

I kind of like the "min-height fast hack":

http://www.dustindiaz.com/min-height-fast-hack/

[Christian Montoya]

On Mon, Mar 23, 2009 at 7:56 AM, csbartus <bartus....@gmail.com> wrote:
>
> ahoy,
>
> i was looking on forum posts for a solution, there are many links to
> external pages, i've tried all those techniques but none works for me.
>
> i have the following structure in a Wordpress blog:
>
> <div class="container">
>  <div id="header">...
>  <div id="content"> ...
>  <div id="sidebar"> ...
>  <div id="footer"> ...
> </div>

The faux columns technique would work much better for you if your
structure looked like:

<div class="container">
<div id="header">

</div>

<div class="container">
<div id="content">
<div id="sidebar">
</div>

<div class="container">
<div id="footer">
</div>

That's how I do my layouts, at least.

--
--
Christian Montoya
mappdev.com :: christianmontoya.net