Click here to learn more and download ABRViewer

CreativePro Office: project management system

Don’t get me wrong, BaseCamp is the leader in my opinion as far as PMS’s are concerned, however a little spendy for the starving artist. UpStart Productions released this free PMS, simply signup and use it. It doesnt have the messaging like some of the others do but it is great way to manage projects, tasks, contacts, notes and even has invoicing built right in. This is a great way to track your hours realtime and really see how much time a project takes.

http://www.creativeprooffice.com/

MyHours: online time tracking

This is a great online services to help you as a freelancer to manage your time and track all of your projects in one place. Adding projects and tasks is very simple and makes invoicing a smooth process. You can export reports many different ways helping you to avoid invoice disputes. The reports also help to see where you are spending most of your time using very readable graphs.

http://myhours.com/

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;
}