Back to CSS Tips
Preview: what the working site looks like.
The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Untitled Document</title>
</head>
<body>     
    <div id="container">
                    <aside id="one">
                        <h2>box_1</h2>
                            <p>Some text would go inside these p tags and it would be very important.</p>
                                <ul>
                                	<li><a href="#">click me</a></li>
                                	<li><a href="#">click me</a></li>
                                	<li><a href="#">click me</a></li>
                                	<li><a href="#">click me</a></li>
                                </ul>
    				<!--end one--></aside>
    <aside id="two">
        <h2>box_2</h2>
            <p>Some text would go inside these p tags and it would be very important.</p>
                <ul>
                	<li><a href="#">click me</a></li>
                	<li><a href="#">click me</a></li>
                	<li><a href="#">click me</a></li>
                	<li><a href="#">click me</a></li>
                </ul>
	<!--end two--></aside>
                    <aside id="three">
                        <h2>box_3</h2>
                            <p>Some text would go inside these p tags and it would be very important.</p>
                                <ul>
                                	<li><a href="#">click me</a></li>
                                	<li><a href="#">click me</a></li>
                                	<li><a href="#">click me</a></li>
                                	<li><a href="#">click me</a></li>
                                </ul>
    				<!--end three--></aside>
    <aside id="four">
        <h2>box_4</h2>
            <p>Some text would go inside these p tags and it would be very important.</p>
                <ul>
                	<li><a href="#">click me</a></li>
                	<li><a href="#">click me</a></li>
                	<li><a href="#">click me</a></li>
                	<li><a href="#">click me</a></li>
                </ul>
    <!--end four--></aside>  
    <!--container--></div> 
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 725px;
	margin: 30px auto 900px;
	padding: 15px;
	overflow: auto;
	background: #cc9;
	font-size: 0.8em;
}
aside {
		width: 150px;
		margin: 0 15px 0 0;
		float: left;
		padding: 10px;
}
	aside:last-child {margin: 0;}
		aside#one {background: #9ff;}
		aside#two {background: #cff;}
		aside#three {background: #ffc;}
		aside#four {background: #3ff;}
				ul {list-style: none;}
				li {padding: 5px 0;}