How do I make the footer stretch vertically downward align to footer.

Question

I am new to web design using tableless and I'm having problem positioning some elements on my page..

Here's the sample html: http://christianruado.comuf.com/sample.html

As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.

CSS:

.container {
    width:88%;
}
#header {
    background:#CCCCCC;
    margin-bottom:5px;
    padding-bottom:2px;
    height:100px;
    text-align:center;
}
#content {
    background: #0099CC;
    margin-bottom:5px;
}
#main {
    margin: .5em 0 0 0;
    text-align: left;
    width:80%;
}
#right {
    float:right;
    width: 19%;
    background:#FF3300;
    margin-left:2px;
    height: 100%;
    min-height: 200px;
}
#right .top {
    top:0;
    display:block;
    background-color:#CCCCCC;
}
#right .bottom {
    bottom:0;
    display:block;
    background-color:#FFCCFF;
    height:30px;
}
#center {
    background:#00FF99;
    padding: 5px 0 0 10px;
    float:left;
}
#footer {
    clear:both;
    height:30px;
    background-color:#CCFF33;
    width:80%;
    text-align:left;
}

HTML markup:

<div class="container showgrid">
  <div id="header">
    <h1>Header</h1>
  </div>
  <div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
  <div id="main">
    <div id="center">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Content here</p>
    </div>
  </div>
  <div id="footer">
    <h3>Footer</h3>
  </div>
</div>

Answer 1

This is not exactly the answer to your problem, but it should get you on the right track.

Behold! The Holy Grail!

If that doesn't work, another technique you can use is to fake the column. This is done by vertically tiling a background image the width of your column behind where you want your column to be. It's not bad and can work in a pinch.

Answer 2

css :

#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer 
{float:left;}

html :

div.header <br>
div.center + div.left <br>
div.footer + div.right

should be like this/