Build a simple custom theme – Part 1

Step 5: Let’s adjust the main content area

The main content area appears below the header and contains your content and sidebar. The first thing that needs to be done is to adjust the width of the main div and switch the positions of the content and sidebar.

This is done by adjusting the #main and #content divs to:

#main {
	float:left;
	width:900px;
	padding:30px;
}

#content {
	float: right;
	width:600px;
}

Scrolling a little lower, you will locate the #sidebar div and this one can be changed to:

#sidebar {
	float:left;
	width:280px;
}

Now our main body area has lots of breathing room, our sidebar is on the left and content on the right.