Make div take up remainder of space on the Y axis - css

Question

I have a product template that looks like this:
The html for it is:
<div id="product">
<div id="cont">
<div class="productPictures">
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
</div>
<div class="productNumber"> #123 </div>
<div class="productDesc">
<table>
<col id="col1" />
<col id="col2" />
<tbody>
<tr>
<td> Body Type: </td>
<td> Stratocaster </td>
</tr>
<tr>
<td> Body Wood Type: </td>
<td> Walnut </td>
</tr>
<tr>
<td> Weight: </td>
<td> 12.7 lbs </td>
</tr>
<tr>
<td> Thickness: </td>
<td> 1 inch </td>
</tr>
<tr>
<td> Routing: </td>
<td> Standard </td>
</tr>
</tbody>
</table>
<div class="productPrice">
$456.00
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
#product {
background-position: left top;
border: 2px solid #2D0000;
background-color: #42533E;
width: 650px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #C9E0D0;
float: right;
text-shadow: 2px 2px 3px #252525;
}
.productPictures
{
float: left;
padding: 0px;
margin: 5px 0px 10px 0px;
width: 200px;
}
.productDesc{
padding: 5px 10px 5px 5px;
color: #FFFFFF;
font-size: large;
float: left;
width: 400px;
height: 100%;
}
.productPrice {
font-size: 25px;
color: #F4D582;
text-align: right;
font-weight: bold;
text-shadow: 2px 2px 3px #252525;
}
.productImage {
border: 2px solid #20281E;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#col1{
width: 40%;
}
#col2{
width: 60%;
}
table{
width: 100%;
}
So what I would want is for the product description div to end up at the bottom so that the price would also end up at the bottom. I tried to set height to 100% but this did not have any effect.
Thanks

Answer 1

And here is a working example.
relevant code:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}

Answer 2

First of all you need to set float:left on the div with the id of cont.
You have elements inside that container floating left, but that container is not, therefore its height is not expanding to its content.
Then you can set the productDesc div to be position:absolute and bottom:0px.
Of course, this will mess with its relative positioning to the photos, which it currently has, but if you want it fixed to the bottom of the parent container, that's the only way. You can then set the right:100px or however much it needs to be horizontally positioned how you would like.
Edit:
Here's a working example: http://jsfiddle.net/citizenconn/hXSmK/

Answer 3

Clear floats for your .productDesc and .productPictures
Use display:inline-block for those 2 DIVs.
And reduce the width of your .productDesc. Say, make it 350px
This will work.