Question

It’s not easy to explain very well what I’m having problem with so I have attached an image:

http://test.richardknop.com/test.gif

Here is my simplified XHTML markup so far:

<div id="page">

    <div id="content">

    </div>

    <div id="sidebar">

    </div>

</div>

How to style it?

I’m getting a little bit desperate and I’m not even sure it’s possible.

Answer 1

Like this:

#page {
   position:relative;
   overflow:hidden;
}

#page .images {
   position:absolute; bottom:0; left: 0; width: $width-of-sidebar;
}

#sidebar {
   padding-bottom: $height-of-the-image;
   float:left;
}

To get background in the sidebar you’ll need faux columns technique.