Three Columns collapses third

HTML & CSS
1

I have a three column layout and it collapses the third column,

#page{
    width:747px;
    margin:0 auto;
	/*background:url(images/page_bg.png) 50% 50px no-repeat;*/
}
.left-entry{
float: left;
	width: 229px;
}
.center-entry{
	width: 287px;
	padding: 0 250px 0 240px;
	position:relative;
	margin: 0 auto;
}
.right-entry{
float: right;
width: 229px;
}

And this is the code

<div id="page">

<div class="left-entry">
        <h2>Main Content</h2>  
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end left-->
        <div class="center-entry">
        <h2>This is the main column title</h2>  
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end center-->
        <div class="right-entry">
        <h2>Third column title</h2>  
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end right-->
          

  </div> <!--end page-->

It collapses the third column and sends it to the bottom.

2

It would be better just to float each column, and not have that wide padding on the middle column. All that padding leaves no room for the third column.

Here’s a simple way to do it with all columns floated:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
#page{
    width:747px;
    margin:0 auto;
	/*background:url(images/page_bg.png) 50% 50px no-repeat;*/
}
.left-entry{
float: left;
width: 221px;
padding-right: 10px;
}
.center-entry{
width: 279px;
float: left;
padding-right: 10px;
}
.right-entry{
float: right;
width: 225px;
}
</style>

<script type="text/javascript" src=""> </script>
	
</head>




<body>
<div id="page">

<div class="left-entry">
        <h2>Main Content</h2>  
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end left-->
        <div class="center-entry">
        <h2>This is the main column title</h2>  
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end center-->
        <div class="right-entry">
        <h2>Third column title</h2>  
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end right-->
          

  </div> <!--end page-->

</body>

</html>
3

Worked great! Never crossed my mind of having both elements in the same float. Thank you.