2column CSS Layout Tutorial

kodiak · #1 (**permalink**) 07-19-2007, 05:24 AM

2 Column CSS Layout Tutorial by: Matthew Walko

*NOTE* i need to redo the layout for i can have a graphical representation for you all. but for right now heres the tutorial.

Please note there are some not so perfect parts in this layout. Meaning the design is a bit flawed in places but I will fix it and repost the corrected parts but for educational purposes its fine.

We are goning to make a 2 column CSS based layout. It should be fun so sit back and prepare to be amazed how easily you can make one of your own.

Here's The end result: DEADLINK

Let's start out with the basic code you're gonna need:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>CSS LAYOUT TUTORIAL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">

</style>
</head>
<body>
</body>
</html>

Here we have a blank template with an internal stylesheet which is also blank at the moment.

Next it's time for a background image. I made a 820 X 9 image with a base color of #CCCCCC and two vertical stripe boxes that are 87 X 9 and placed them at both ends. After that your going to add it to your document via the BODY style like so:

Background Preview: DEADLINK

Code:

body **
	background: #999 url(images/bg.png) repeat-y center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

In this code I set the background color to #999 ( which is the color that surrounds the background image ) and specified my background image and set it to repeat downwards ( repeat-y) and made it centered on the document. Also I set up what font to use and its color and size.

Look at what you should have now. DEADLINK

Now we are going to focus our attention on the header image and slogan text. for this tutorial i made a header image of 646 X 120. We add to the document like so:

Code:

.header **
	background: #000 url(./images/header.png) center;
	height: 120px;
	width: 646px;
	margin-left: 171px;
	margin-top: -8px;
}

This places the image at the top of the page and in-between the two vertical pinstripes.
Notice the height, width These are all used to control the images size. By default the background color will span across the screen giving us an unwanted result. The margin-left, margin-top is used to control the where the header image will be placed on the screen.

We also need to add some HTML now so we can customize the slogan and site title:

Code:

<div class="content">
	<div class="header">

		<div class="padding">
			<a href="#">About</a> 
			<a href="#">Contact</a>
		</div>
			<div class="title">CSS LAYOUT TUTORIAL</div>
			<div class="slogan">Your Best Slogan Here</div>
	</div>

Add this right after the <body> code.

Now we need to spice up and place the links and text. As you shoukd know the <div class="header"> is referenced by the '.header' style. I've added two links to be placed at the top right of the header image, and the site title, and slogan at the bottom left of the header image.

Here is the style information to do that:

Code:

	.header a ** color: #FFF; background: inherit; text-decoration:none; }
	.header a:hover ** color: #FFF; background: inherit;}

.header .padding **
	
	float: right;
	padding: 1px 3px 0 0;
	color: #FFF;
}

.header .title **
	float: left;
	padding: 90px 0 0 2px;
	color: #FFF;
	font: bold 1.2em Arial, sans-serif;
}

.header .slogan **
	float: left;
	clear: both;
	padding: 2px 0 0 54px;
	color: #FFF;
	font: bold 0.8em Arial, sans-serif;
}

These two lines dictate the link color and hovered link color of the 2 links on the top right of our header image.

.header a ** color: #FFF; background: inherit; text-decoration:none; }
.header a:hover ** color: #FFF; background: inherit;}

the .padding style is set to float the text to the right, and is additionally controlled by the padding:. Color is the color of the text.

the .title style is floated to the left. The padding attribute controlls the placement of the text and the color is set to white. The font is set to bold 1.2em ( like 16px high) and arial font.

The .slogan style is also floted to the left and clears both the hearder image and the padding style. The padding attribute controlls the placement of the text and the color is set to white. The font is set to bold 1.2em ( like 10px high) and arial font.

Now for the top navigation bar. Heres the CSS for for the top navigation:

Code:

#nav **
	background: #000;
	width: 646px;
	height: 23px;
	padding: 0;
	margin-left: 171px;
}

#nav ul ** 
	margin:0; 
	list-style:none; 
	padding: 0px 0 0 0px; 
}

#nav a, #nav strong, #nav span ** 
	float:left; 
	display:block; 
	color:#fff; 
	padding: 5px 10px 5px 10px; 
	background: #9e9e9e; 
	text-decoration:none; 
	font-weight: bold; 
}

#nav a ** 
	float:none; 
}

#nav li ** 
	float:left; 
	color: #FFF; 
	background: #9e9e9e; 
	margin:0; 
	padding:0 0 0 0px; 
}

#nav #current ** 
	float:left; 
	background: #aeaeae; 
	color: #FFF; 
}

#nav #current a ** 
	float:left; 
	background: #aeaeae; 
	padding:5px 10px 5px 10px; 
	color:#FFF; 
}

#nav a:hover ** 
	float:left; 
	color:#FFF; 
	background: #aeaeae; 
}  

#nav .padding ** 
	padding: 5px 0 0 10px; 
	font-weight: bold; 
}

And here's the HTML we need to go with it:

Code:

<div id="nav">
	<ul>
		  <li><a href="#home.html">Home</a></li>
		  <li><a href="#products.html">Products</a></li>
		  <li><a href="#archive.html">Archive</a></li>
					<li><a href="#affiliates.html">Affiliates</a></li>
			  <li id="current"><a href="#">About</a></li>
			  <li><a href="#">Contact</a></li>
		  </ul>
</div>

The nav controls the background color, width, height, and margin-left specifies where on the document it is positioned.

This style move the list to the left via the float: left. The list is then diplayed in a block like fashion ( i.e. horizontal one right after the other. ). color specifies the color of the text. The padding is there to add some padding on the top, right, bottom, and left of the blocks. Also note that when I'm talking about the padding im referring to the padding around the text links on the navigation. The background color is set to a silver #9e9e9e. The text decoration meaning bold, italics, underline, superscript (overline), captialization. The font is set to bold. Text is left alone to ride where it wants via the nav a style setting the float to none.

Code:

#nav a, #nav strong, #nav span ** 
	float:left; 
	display:block; 
	color:#fff; 
	padding: 5px 10px 5px 10px; 
	background: #9e9e9e; 
	text-decoration:none; 
	font-weight: bold; 
}

#nav a ** 
	float:none; 
}

The last part of the style for the nav of interest is:

Code:

#nav li ** 
	float:left; 
	color: #FFF; 
	background: #9e9e9e; 
	margin:0; 
	padding:0 0 0 0px; 
}

#nav #current ** 
	float:left; 
	background: #aeaeae; 
	color: #FFF; 
}

#nav #current a ** 
	float:left; 
	background: #aeaeae; 
	padding:5px 10px 5px 10px; 
	color:#FFF; 
}

#nav a:hover ** 
	float:left; 
	color:#FFF; 
	background: #aeaeae; 
}  

#nav .padding ** 
	padding: 5px 0 0 10px; 
	font-weight: bold; 
}

The li ( stuff inside the list) is set to the left with a color of white ( meaning the text in this case) and the bacground color is set to to a medium dark silver. Now the current style is meant to highlight a certain link ( the about link in this case ). it set to the left and background color is set to a lighter silver. The active link just hs some padding added to it. The hover basically makes the links without the lighter silver change to the lighter silver color.

Meat and potatoes time! And now for the main content area and right sidebar.

Heres the styles:

Code:

.main_content **
	background-color:#FFFFFF;
	margin: 0 auto;
	padding: 0px;
	width: 646px;
}


.sm_left **
	background-color: #FFF;
	color: #000;
	margin: 0 0 0px 0px;
	padding: 0px 0px 0px 10px;
	width: 450px;
}



.sm_right **
	clear:both;
	background-color: #FFF;
	float: right;
	color: #000;
	margin: 0 10px 0 0;
	padding: 0px 0px 0 15px;
	width: 146px;
	border-left: 1px dashed #ccc;
}	

/* For IE... */
* html .sm_right **
			  clear:both;
			  background-color: #FFF;
	float: right;
	color: #000;
	margin: 0 40px 0 0;
	padding: 0px 0px 0 15px;
	width: 170px;
	border-left: 1px dashed #ccc;
}	


.text_padding **
	padding: 15px 0 0 0;
}

.main_content h2 **
	background-color: #FFF;
	padding: 5px 0 5px 0;
	color: #46574D;
	font: bold 1.6em Arial, sans-serif;
}

input.button ** 
	background: #FFFFF4; 
	color: #808080;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

Heres the XHTML

Code:

<div class="main_content">
	<div class="sm_right">

		<div class="text_padding">

<h2>WalkoNetNews</h2> sit amet consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio.
						<br />
						<h2>Search</h2>
						<form method="post" action="#">
							<p><input type="text" name="search" class="search" /> <input type="submit" value="Go" class="submit" /> </p>
						</form>

						<br />
						<h2>Last Articles</h2>
						<a href="#">Link to a article</a><br />
						<a href="#">Link to another article...</a><br />
						<br />
						<h2>Links</h2>
						<a href="http://www.solucija.com">www.google.com</a><br />

						<a href="http://www.free-css-templates.com">ww.cursedgfx.com</a><br />
	</div>
</div>
			
<div class="sm_left">
		<div class="text_padding">	

<h2>About</h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est. Fusce et odio sit amet erat ullamcorper accumsan.Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est. Fusce et odio sit amet erat ullamcorper accumsan.
							<p class="date"><img src="images/comment.gif" alt="" /> <a class="date" href="#">Comments(2)</a> <img src="images/timeicon.gif" alt="" /> 21.02.</p><br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est. Fusce et odio sit amet erat ullamcorper accumsan.Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est. Fusce et odio sit amet erat ullamcorper accumsan.
<p class="date"><img src="images/comment.gif" alt="" /> <a class="date" href="#">Comments(15)</a> <img src="images/timeicon.gif" alt="" /> 13.01.</p><br />							
	</div>
</div>

Okay. The main_content class style defines the background color and TOTAL width of the whole area (main & right side menu). The sm_left is the main content area. The text color is set to black and the width is set to 450 pixels. The right side menu is floated right (moved tot he right) and set to clear both. Background color is set to white, text color black and 40 pixel margin on the right side.That pushes the right side menu toward the center at the starting point of the right. Theres also a 15 pixel padding on the left side too.. Thats there just for some extra room between the main content and the sidebar menu content. For FireFox and like browsers it has a width of 146. But as you will find out Internet Explorer handles widths a lot differently. You will need to create an IE hack to make the side menu look the same. For IE I set the width to 170. And last but not least you add a seperater by putting a border on the left of the right menu with this border-left: '1px dashed #ccc' (meaning 1 pixel in width, dashed and a color grey.

Now we style the H2 which would be our topic titles with a background of white, a 5 pixel padding on the top and bottom areas. the font color is set to a dark grey with bold text and arial font.

For the search box we are goning to style it slightly with a slight off-white background, an almost black font color and a border for the right and left to make it not look indented into the page.

Here the CSS for the Footer:

Code:

.footer ** 
	background: #000;
	width: 646px;
	height: 78px;
	color:#555;  
	font-size:90%;
	text-align:center; 
	clear:both;
}

	.footer .padding **
		padding: 40px 0 0 0;
				
}

And here the XHTML for the Footer:

Code:

  
				<div class="footer">
					<div class="padding">
						Powered by <a href="http://walkonet.com" title="Resource for XHTML and CSS">WalkoNet</a>	
						| © Copyright WalkoNet Template :: Design: <a href="http://walkonet.com." title="WalkoNet">Matthew Walko</a>

						| <a href="rss/">RSS Feed</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a>  | <a href="#">Login</a>
					</div>
				</div>

			</div>
	</div>
	
</body>
</html>

If you have any questions or comments please feel free to ask/ comment. Also if you need and help you can ask me or anyone on our web staff for help also! Thanks and This is a first of many so stay tuned!!!!

**.lg.AzzidReign** · #2 (**permalink**) 07-19-2007, 04:14 PM

Nice...but you do know that if you use dreamweaver cs3, they have it premade for you

Nerve · #3 (**permalink**) 07-23-2007, 02:45 PM

I prefer to use this:

Code:

<div style="width"50%;float:left;">lol</div>
<div style="width"50%;float:right;">haha</div>

Makes life much easier.

jaygagegfx · #4 (**permalink**) 09-07-2008, 03:14 AM

Quote:

Originally Posted by Nerve

I prefer to use this:

Code:

<div style="width"50%;float:left;">lol</div>
<div style="width"50%;float:right;">haha</div>

Makes life much easier.

co-sign the hell outta that

ChaosForce · #5 (**permalink**) 09-09-2008, 02:42 PM

nice...encoder hehe... use dreamweaver is best....

Godly Chaos · #6 (**permalink**) 09-17-2008, 04:13 AM

Good post.. But As Azzid said.. dreamweaver gives it away

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

2column CSS Layout Tutorial

Web Design Tutorials

This is a discussion on 2column CSS Layout Tutorial within the Web Design Tutorials, part of the Graphics Tutorials category; 2 Column CSS Layout Tutorial by: Matthew Walko NOTE* i need to redo the layout for i can have a graphical representation for you all.* ...

2column CSS Layout Tutorial

Web Design Tutorials

This is a discussion on 2column CSS Layout Tutorial within the Web Design Tutorials, part of the Graphics Tutorials category; 2 Column CSS Layout Tutorial by: Matthew Walko *NOTE* i need to redo the layout for i can have a graphical representation for you all. ...

This is a discussion on 2column CSS Layout Tutorial within the Web Design Tutorials, part of the Graphics Tutorials category; 2 Column CSS Layout Tutorial by: Matthew Walko NOTE* i need to redo the layout for i can have a graphical representation for you all.* ...