I have a FLOATING problem !

Question

Dear Adobe Forum Users, please help!!
I am sure this is quite simple and I have even read in my BIG user manual what the solutions are supposed to be for this problem, but it just doesn't or won't work for me.
PROBLEM:
I want to have a 2 column text layout in the middle of my page using 3 DIVS, a wrapper DIV ( #contentPanel ) and within that a left and right column DIV ( #contentColumn1 and #contentColumn2 ). Depending on the amount of content that goes into the 2 column DIVS, I want the  #contentPanel to expand and contract along with these, keeping the white background all the time. BUT as I have the height of the contentPanel set to auto, it doesn't move at all, but the text columns expand (SEE pic1.jpg).
If I was to set the height of the contentPanel to a pixel height I would get the desired look (SEE pic2.jpg), but then it is a fixed height for all pages which I do not want.
I have read that if I am floating 2 DIVS inside a wrapper DIV, I need to just float the wrapper DIV also, but then it is floated left or right, and I need it centred so that doesn't work.
Any help or advice VERY much appreciated in solving this seemingly simple problem.
Below is the CSS for the DIVS in question.
#contentPanel {
    width:900px;
    height:auto;
    margin: 100px auto 50px auto;
    padding:30px;
    background-color:#FFF;
    border-radius:20px;
    box-shadow: 0 0 10px #666;
#contentColumn1 {
    width:405px;
    height:auto;
    margin-right:40px;
    float:left;
#contentColumn2 {
    width:405px;
    height:auto;
    float:right;
If anyone needs more info just let me know.
Many thanks!

Answer 1

Looks like a job for "clearfix". Add the following to the end of your CSS...
.clearfix:after {
    clear: both;
    display: block;
    content: " ";
    height: 0px;
    visibility: hidden;
.clearfix {
    display: inline-block;
* html .clearfix {
    height: 1%;
.clearfix {
    display: block;
Then place class="clearfix" in the div that isn't expanding right.