In last three days, i had at least five request for making a tutorial about CSS layouts. I also have request about slicing, but this can be wait for a while (i’m thinking seriously to make a video tutorial about this; what do you think?). For now i will show you two way to get the „perfect” layout. First one is basic, easy to use and to implement and second is SEO friendly, where main content is the first thing you see when you view the source.

I will make examples for very basic layouts (and also most used): Header, Sidebar, Content area and Footer.

Here is all steps. Step 1: markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrap">
	<div id="header">
		Header 
	</div><!--/header-->
	<div class="clearfix">
		<div id="left">
			left side
		</div><!--/left-->
		<div id="right">
			right side
		</div><!--/right-->
	</div> 
	<div id="footer">
		footer
	</div><!--/footer-->
</div><!--/wrap-->

Step 2: Floatings. We float left and right sidebar and content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left, 
	#right {
		height:500px;
	}
	#left {
		width:200px;
		float:left;
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Step 3: Done Here is the demo. Yeah, i know, too easy, right? Sorry for that (i like to work easy )

The next example is just a little bit more complicated, because, as i said, the content will be the first thing in source, so the search crawler can find content more easy.

Step 1: Markup (with content first!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="wrap">
	<div class="clearfix" id="content">
		<div id="right">
			right side
		</div><!--/right-->
		<div id="left">
			left side
		</div><!--/left-->
	</div> 
	<div id="header">
		Header 
	</div><!--/header-->
	<div id="footer">
		footer
	</div><!--/footer-->
</div><!--/wrap-->

Next step, the only need to float is the right side:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left, 
	#right {
		height:500px;
	}
	#left {
		width:200px;
 
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Ok, but how do we put the header back on top? Very simple: Header needs to be absolutely positioned and the content needs to be moved a little bid lower (exactly the header height):

1
2
3
4
5
6
7
8
9

#header {
	height:150px;
	border-bottom:1px solid #eee;
	position: absolute;
	top:0;
}
#content {
	margin-top:150px;
}

Next step is… You guess it right! DEMO. Again, sorry if you wanted more code to read and understand, fancy yada yada yada code and so on. I like to have a clean and easy to understand code

Any question?