#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    3
    Rep Power
    0

    Problems with CSS 3-column layout


    I am having some problems laying out a center-aligned container with 3 columns within it. I am sure the issue is with float, but I can't figure out how to get around it.

    Actually, it does work, but only if the center column is longer than the other two columns. Otherwise, they wrap over the footer and extend outside the container.

    Here is the CSS:
    Code:
    body {
    		margin:0px 0px 10px 0px;
    		background-image : url(image_name.gif);
    		background-repeat:repeat-x;
    	    text-align: center;
    		}
    	A 			{ color: #0066CC; text-decoration: none; font-weight:bold; } 
    	A:link		{ color: #0066CC; text-decoration: none; } 
    	A:visited	{ color: #0066CC; text-decoration: none; } 
    	A:active	{ color: #3399ff;  } 
    	A:hover		{ color: #3399ff;  }
    	
    	h1, h2, h3 {
    		margin: 0px;
    		padding: 0px;
    	}
    
    	
    	
    #container {
        position: relative;
        margin: 0 auto;
        width: 622px;
        text-align: left;
        padding: 0px;
        border: 1px solid blue;
        }
    
    #topnav {
        width: 622px;
        border: 1px solid black;
        }
    
    #topnav_text {
        width: 622px;
    	height: 92px;
        border: 1px solid black;
        }
    
    	
    #banner {
        width: 622px;
        border: 1px solid black;
    	padding: 10 0 20 0;
        }
    	
    #footer {
        width: 622px;
        border-top: 1px solid silver;
    	padding: 5 0 0 0;
        text-align: left;
        border: 1px solid black;
        }
    
    #homepix {
        width: 235px;
        float: left;
        border: 1px solid green;
    	padding: 0 5 0 5;
        }
    
    #homejournal {
        margin-left: 248px;
        width: 215px;
        border: 1px solid red;
    	padding: 0 5 0 5;
    	background:#fff;
    	padding-bottom:20px;
        }
    
    #homeshows {
        float: right;
        width: 135px;
        border: 1px solid blue;
    	padding: 0 5 0 5;
    	background:#fff;
    	padding-bottom:20px;
        }
    
    .homeblog {
     		padding-left:15px;
     		padding-bottom:15px;
     		padding-right:15px;			
    	}	
    
    .homeblogbody {
    	font-family:verdana, arial, sans-serif;
    	color:#333;
    	font-size:x-small;
    	font-weight:normal;
     		background:#FFF;
     		line-height:110%;
     		padding-left:5px;	
     		padding-right:5px;
    	
    	}
    
    
    .homeblogbody a,
    .homeblogbody a:link,
    .homeblogbody a:visited,
    .homeblogbody a:active,
    .homeblogbody a:hover {
    	font-weight: normal;
    	text-decoration: underline;
    }
    
    }
    
    .title	{ 
    	font-family: verdana, arial; 
    	font-size: small; 
    	color: #003366; 
    	text-transform: uppercase;
    	font-weight:bold;	
    	}			
    	
    
    .homeside {
    	font-family:verdana, arial, sans-serif;
    	color:#333;
    	font-size:x-small;
    	font-weight:normal;
     		background:#FFF;
     		line-height:140%;
     		padding:2px;				
    	}	
    
    .side a {
    	font-family:verdana, arial, sans-serif;
    	font-size:x-small;
     		background:#FFF;
     		line-height:140%;
    	}
    And here is a sample page:

    Code:
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    
        <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    
    
    <!--#include virtual="/inc/functions.js" -->
      </head>
    
      <body>
        <div id="container">
    	
    	  <div id="topnav">
    	  Navigation row goes up here
    	  </div>
    	
       
    	  <div id="homepix">
    		Generally an image goes here
          </div>
          <!-- end navcol -->
    
    	  <div id="homeshows">
    	  <div class="homeside">
            <strong>Upcoming Events Calendar</strong><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		Events...<br><br>
    		<a href="/shows/">All events...</a>
    		</div>
          </div>
    
          <div id="homejournal">
    	  
    	  <div class="homeblogbody">
           	Yadda Yadda Yadda....
           	Yadda Yadda Yadda....
           	Yadda Yadda Yadda....
           	Yadda Yadda Yadda....
           	Yadda Yadda Yadda....
    	  </div>
    	 
          </div>
          <!-- end content div -->
    
    	  
          <div id="footer">
           <!--#include virtual="/inc/footer.inc" -->
          </div>
    
    
        </div>
        <!-- end container div -->
      </body>
    </html>
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Here are a couple of variations

    http://www.fu2k.org/alex/css/layouts...N4_RWS_C.mhtml

    http://www.fu2k.org/alex/css/layouts...4_FMFM_C.mhtml

    They might offer some ideas for you.

    <mode="edit">
    Or, the answer may be as simple as:
    Code:
    #footer {
        clear: both;
        width: 622px;
        border-top: 1px solid silver;
        padding: 5 0 0 0;
        text-align: left;
        border: 1px solid black;
        }
    </mode>

    cheers,

    gary
    Last edited by kk5st; March 6th, 2004 at 01:52 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo