4.1 CSS Code Snippets

When writing web pages, and especially when first starting out, it is sometimes useful to be able to lay your hands on some quick snippets of code that you can pull into your pages and alter (although with practice some of these become second nature anyway).

The CSS for your site is entirely up to you, but a starter for ten is shown below and relates to the HTML snippets shown earlier. This can be adjusted, tweaked, improved, obliterated...as you see fit to suit your own site(s).

html, body	{height:100%;}

body		{text-align: center;}

#wrap		{margin: 0 auto;
		width: 900px;
		height:100%;}

#header 	{width: 900px;
		height: 100px;}

#content	{display: inline;
		float: left;
		width: 600px;
		min-height:100%;
		_height: 100%;
		margin-left: 150px;}

#leftbox	{display: inline;
		float: left;
		width: 150px;
		min-height:100%;
		_height: 100%;
		margin-left: -900px;}

#rightbox	{display: inline;
		float: left;
		width: 150px;
		min-height:100%;
		_height: 100%;}

#footer 	{clear: both;}