SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Three Columns collapses third.

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •