how to extend sidebars in 3 column liquid, header and footer in dreamweaver cs4

Question

Hi, When i select Dreamweaver cs4 layout: 3 column liquid, header and footer, the sidebars don't touch the footer at the bottom. If i apply different color to the sidebar1, it appears to be just hanging on the side. How to make it touch the footer?

Answer 1

Ah I see, the reason there's a gap is because the content inside the middle column is pushing the parent div downwards, but not the side columns. The side columns will only grow to fit the content inside them.

What you're after is called Faux Columns. See this A List Apart article

Answer 2

Hi,

I had the same issue with a site I had created in Dreamweaver and here is the way I solved it:

I used four div tags - one main container which contained 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_left {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}

.sidebar_right {
width: 220px;
float: right;
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." The footer doesn't even have to contain anything if you don't want it to, it just needs to be there.

Then, simply set up your web page like this:

<div id="container">
<div class="sidebar_left"></div>
<div class="sidebar_right"></div>
<div class="content"></div>
<div id="footer"></div>
</div>

If you want more information, you can read my blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Let me know if you have any questions. Hope this helps!