Question

I have a 3 column site. The left and right side, if i put height: 100% it only fills up to the end of the content in that column. I would like for it to go all the way down to the footer. Thus not leaving an open space between the column and the footer.

added, http://jsfiddle.net/3vm2t/1/

CSS

/* RIGHT COLUMN */
#rightcolumn{
float: left;
width: 20%; /*Width of right column in pixels*/
min-width: 200px;
height: 100%;
margin-left: -20%; /*Set margin to that of -(RightColumnWidth)*/
background: #5f5f5f;
color: White;
}

/* LEFT COLUMN */
#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
min-width: 200px;
height: 100%;
margin-left: -100%;
background: #5f5f5f;
color: White;
}

also in case its needed

body{
margin:0;
padding:0;
line-height: 1.5em;
color: black;
height: 100%;
}

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGbkup.jpg'), url('../images/bannerBGl.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;
height: 200px; /*Height of top section*/
color: White;
text-align:center;
min-width: 950px;
}

/* middle collumn */
#contentwrapper{
float: left;
width: 100%;
min-width: 1000px;
background: #919191;
}

#contentcolumn{
margin: 0 20% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

I tried to explain what i am talking about but still kind of new to css/html but if more info is needed please let me know. Not sure if you would need any html code? but if so ill update.
Thanks

Answer 1

I think you should use the table html layout for what you want to do.

You can put your columns in a <table>, but the cleanest way I think is to use the display: table-cell CSS property.

I took the liberty of editing your HTML/CSS content : http://jsfiddle.net/TxeJu/

Moved the “content” block between left and right blocks, added display: table-cell property, and removed the table you put in the “content” block.