Three Columns collapses third.

**theGermz** · Feb 26, 2010 21:29

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

Code:

#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

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.

**ralph.m** · Feb 26, 2010 22:01

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:

Code:

<!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>

**theGermz** · Feb 26, 2010 22:19

Originally Posted by ralph.m

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:

Code:

<!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>

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

User Tag List

Thread: Three Columns collapses third.

Thread Tools

Display

Three Columns collapses third.

Bookmarks

Bookmarks

Posting Permissions