Problems with CSS 3-column layout

Dev Shed Forums Sponsor:

March 6th, 2004, 11:11 AM

a_calder

Registered User

Join Date: Feb 2004

Posts: 3

Time spent in forums: < 1 sec
Reputation 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>

March 6th, 2004, 01:34 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 58 m 24 sec
Reputation Power: 662

Here are a couple of variations

http://www.fu2k.org/alex/css/layout...NN4_RWS_C.mhtml

http://www.fu2k.org/alex/css/layout...N4_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

__________________
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.

Last edited by kk5st : March 6th, 2004 at 01:52 PM.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: