In this tutorial I want to show you a unique way to create a row of buckets to put your content using minimal CSS. There are several ways to do this with div’s or crappy tables. This technique is similar to the way other developers have been doing navigation in CSS. Whether you are a beginner or an expert this tutorial will be helpful, however if you want to skip down to the bottom and simply copy and paste the CSS, be my guest.

View Demo

The HTML
Using an unordered list with three list items to build your three columns. Each list item is one column, you can have more or less with this same css you would just need to add or subtract a list item. Copy and paste the below code in your body of your HTML page. NOTE: This code is custom to this example, fiddle around with the HTML to add images or links to the same container.

<ul class="buckets">
	<li>
        <h1>Column One</h1>
        <p>Your content goes here...</p>
    </li>
	<li>
        <h1>Column Two</h1>
        <p>Your content goes here...</p>
	</li>
	<li class="last">
        <h1>Column Three</h1>
        <p>Your content goes here...</p>
    </li>
</ul>

The CSS
You can either use an external or internal stylesheet, but you really should use external when you can. You can modify the code provided as you see fit. Pay close attention to the widths, margins, and paddings. These attributes combined will make up the overall width. Copy and paste the code below into your page and there you have it.

.buckets {
   list-style-type: none;
   width:100%;
}
.buckets li {
   float: left;
   width: 250px;
   position: relative;
   margin: 0 10px 0 0;
   padding:3px;
   font:13px Arial;
   line-height:18px;
   border:1px solid #dddddd;
}
.buckets li h1{
   margin:0;
   padding:10px;
   width:230px;
   background-color:#000000;
   font:15px Arial;
   color:#FFFFFF;
}
.buckets p {
   margin:0;
   padding:10px;
}