Floats and paddings - equal height - html

Question

I have a page with a container and two columns. My structure looks this
<div id="page">
<div id="left"></div>
<div id="right"></div>
</div>
Here is the CSS
#page {
min-height: 100%;
height: 100%;
width: 90%;
font-size: 100%;
margin: 0 auto 0 auto;
padding: 0;
font-size: 1em;
position: relative;
}
#left {
background-image: url("../images/layout/background.png");
width: 198px;
min-height: 100%;
float: left;
}
#right {
margin-left: 230px;
min-height: 100%;
background-color: #FFFFFF;
border: 1px solid red;
padding: 150px 20px 0px 20px;
text-align: justify;
}
At the moment with the previous code the #page element doesn't stretch to the bottom and neither does the #left. If I remove the paddings from #right, #page and #left are equal height with #right.
How do I solve this?

Answer 1

So there are a couple ways you could handle that. If you're looking to just have two columns with different backgrounds that both reach the bottom of their container you could use a background image that repeats vertically or a css3 gradient. I set up an example here:
http://jsfiddle.net/29wBn/1/
Notice the gradient background on the #page element
#page {
background: -moz-linear-gradient(left, #b2f8ff 0%, #b2f8ff 50%, #9effaf 50%, #9effaf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b2f8ff), color-stop(50%,#b2f8ff), color-stop(50%,#9effaf), color-stop(100%,#9effaf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* IE10+ */
background: linear-gradient(to right, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2f8ff', endColorstr='#9effaf',GradientType=1 ); /* IE6-9 */
overflow:hidden; /* make the container wrap the floated contents */
}
As a fall back the #page element gets assigned the left columns color and the right column receives it's own color.
Chris Coyer wrote a great article that shows several different ways.
http://css-tricks.com/fluid-width-equal-height-columns/