Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS 3 Column Layout question

    Hi,

    Following on from a previous post, I am after an CSS based 3 Column Layout, in which all columns (left, center, right) are all a fixed width of my choice, and just as important - all 3 columns need to be equal height, so the background colour doesn't just stop when the content inside that column finishes! Can anyone tell me of any sites with tutorials for this?

    Regards, James

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    here we go..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	padding:0;
    	margin:0;
    }
    
    body {
    	font-size:13px;
    	font-family:Arial, Helvetica, sans-serif;
    }
    
    p {
    	margin:20px 0;
    }
    
    #wrapper {
    	margin:auto;
    	width:980px;
    	border:1px solid #333333;
    	margin:15px az;
    }
    
    #header {
    	height:150px;
    	background:#c4c4c4;
    	border-bottom:1px solid #333333;
    	margin:auto;
    }
    
    #container {
    	overflow:auto;
    	background:url('bg.jpg') repeat-y;
    }
    
    #left {
    	float:left;
    	width:230px;
    	padding:10px;
    }
    
    #right {
    	float:right;
    	width:230px;
    	padding:10px;
    }
    
    #content {
    	margin:0 265px;
    }
    
    #footer {
    	clear:both;
    	border-top:1px solid #333333;
    	background:#c4c4c4;
    	margin:auto;
    	padding:15px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    		<div id="header"> </div>
    		<div id="container">
    				<div id="left">
    						<h1>Left sidebar</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
    								semper justo consectetur tincidunt nec tristique urna.</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    				<div id="right">
    						<h1>Right sidebar</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
    								semper justo consectetur tincidunt nec tristique urna.</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    				<div id="content">
    						<h1>Main Content</h1>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    						<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
    								et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    								Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
    								euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
    								at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
    								mattis non nulla</p>
    				</div>
    		</div>
    		<div id="footer">
    				<h3>Footer Content </h3>
    				<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra et
    						feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
    						Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu, euismod
    						tempor tellus sapien porttitor felis. Phasellus non mi nulla, at accumsan
    						enim. Phasellus sem justo, egestas nec vestibulum faucibus, mattis non
    						nulla</p>
    		</div>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails CSS 3 Column Layout question-bg.jpg   CSS 3 Column Layout question-blargh.jpg  

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thakn you for your reply met. This seems good, but have a problem. Although the attachment on your post shows a picture where both the left and right columns are different colours, how is this possible with the code you have given me? I understand the left column's background colour is controlled by the "bg.gif" in the "container" but how is the right column's background colour set? (and still being equal height to the other 2 columns).

    Also, with this set up, is it possible to have a different coloured center column and different coloured page background?

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    read up on faux columns

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for your reply. I understand about faux columns - that I have to set a background image so that the columns background colour goes to the goes to the very bottom, but with the code you gave me for the layout, where in the code do I add a background image for the right column. At the moment there is only an image background for the left, and thats in the container code, so it's not obvious where the right would go.

  • #6
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    its kinda obvious, look at the image bg.jpg - it clearly shows the 3 "faux" columns

    Code:
    #container {
    	overflow:auto;
    	background:url('bg.jpg') repeat-y;
    }
    wraps left, right and content, and acts as the background for all 3.

    you would have to adjust this image to suit your needs.

  • Users who have thanked met for this post:

    jamessillcock (08-16-2010)

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ah my apologies met. The first attachment thumbmail looked so small I didn't think of it being of any significence! But that's great - I'll now edit this to suit my needs. Thanks again.

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Everything is going great so far.. I've edited the columns widths/paddings/margins in the CSS code that match my website design and edited the bg image to also match these changes and it's appearing perfect! Fingers crossed I have no problems as I start adding the design and content! Thanks again Met. I just hope this template has been completely checked for errors.. the Holy Grail one I used a few days ago was supposed to be perfect until I found a load of users saying there were compatibility problems. That was with a fliud center tho, I'm thinking a fixed width won't cause many problems...

  • #9
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    havent checked it in anything other than FF 3.6

    That was with a fliud center tho, I'm thinking a fixed width won't cause many problems...
    this one has a fluid center too, if you increase the width of #wrapper the "content" section will expand accordingly. you would need to adjust the background image however.


  •  

    Posting Permissions

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