CSS Layouts Without Tables

By Jon Jackson

Complex Home Page Layout

There comes a time when a more complex page layout is required. Website home pages are a good example of this. The home page of a website often differs in layout from the rest of the site.

The following HTML and CSS is used to create one example of a home page layout. You can see this page layout here. Unlike the 3 column example above, this page layout is a pretty static. The 3 column layout was flexible in the sense that it could expand vertically with varying amounts of content within its divisions.

This home page layout is more rigid and has all its divisions, widths and heights coded into the CSS. This is perfectly acceptable for a page that will only appear once on a website (i.e. as its home page). There is some tricky math involved with this layout as well. You have to be careful in adding all the margins, borders and padding widths that occur across the page in order to gain perfect alignment.

So let's start off with the HTML again:

<div id="wrapper">
	<div id="header">Header</div>
	<div id="content-box1"><p>Box 1</p></div>
	<div id="content-box2"><p>Box 2</p></div>
	<div id="content-box3"><p>Box 3</p></div>
	<div id="content">
		<div id="content-left"></div>
		<div id="content-main"></div>
	</div>
	<div id="footer"></div>
	<div id="bottom"></div>
</div>

Note that the order of the divisions may not initially make sense. The boxes which ultimately appear below the main content division actually appear above this main content division in the HTML code. This is due to absolute positioning being applied to these box divisions within the CSS.

The CSS code for this example runs as follows:

	body {
		font-family:arial,helvetica,sans-serif;
		font-size:12px;
	}
	#wrapper {
		width:900px;
		margin:0px auto;
		border:1px solid #bbb;
		padding:10px;
	}
	#header {
		border:1px solid #bbb;
		height:80px;
		padding:10px;
	}
	#content {
		margin-top:10px;
		padding-bottom:10px;
	}
	#content div {
		padding:10px;
		border:1px solid #bbb;
		float:left;
	}
	#content-left {
		width:180px;
		height:300px;
	}
	#content-main {
		margin-left:10px;
		width:666px;
		height:150px;
	}
	#content-box1, #content-box2, #content-box3 {
		padding:10px;
		border:1px solid #bbb;
		position:absolute;
		margin-top:190px;
		height:120px;
	}

The above CSS class applies to all 3 of the box divisions on the page. They are positioned absolutely and then pushed into the correct place by using their margin properties.

	#content-box1 {
		margin-left:212px;
		width:200px;
	}
	#content-box2 {
		margin-left:444px;
		width:200px;
	}
	#content-box3 {
		margin-left:676px;
		width:202px;
	}
	#footer {
		float:left;
		margin-top:10px;
		margin-bottom:10px;
		padding:10px;
		border:1px solid #bbb;
		width:878px;
	}
	#bottom {
		clear:both;
		text-align:right;
	}

If you don't understand all of the above code straight away, don't worry. You can easily save your own version of this code and start fiddling around with it to see what's what. Experimentation in this manner is one of the best ways to learn.

Conclusion

Using CSS and "semantic" HTML is the only way forward when it comes to professional web page design. Even though dragging yourself away from table-based layouts may be tough to do, there are many benefits to be had.

Hopefully the two page layout examples within this article will give you something to play with and enable you to improve your CSS skills if you are still a beginner. Even if you find CSS and semantic HTML somewhat tiresome initially, I encourage you to persevere and you will gain some rewarding results.

There are plenty of sites out there (especially this one) that can help you learn more about CSS and semantic HTML, so stick with it and learn how you can make the Web a better place!




Page 2 of 2

Previous Page
1 2
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date