Two-Column Tableless Layout – Step 2

In Step 1 of the 2-column tableless layout tutorial, I showed you how to make a very quick two column design using only floats and percentages. Now, to show you that you can expand on this idea to really create a full design, I’m going to have us work toward creating a variation of an inspiration site design. Here is the inspiration image:

You’ll notice that this is a two column layout, but has some nice detail to it that I plan to show you how to accomplish with this standard 2-column float. That right hand menu will be on the left in our case, though you can easily float it to the other side if you like – in fact, once we have this complete I’ll show you how to move the menu to the other side using just your CSS. That menu has a button like hover effect on mouseover, so we’ll bring that in as well. There are, unfortunately, a significant amount of images used in the inspiration layout, and we’ll work on minimizing those substantially. We aren’t going to make this exactly the same as our inspiration design, because we want ours to be a flexible site also, whereas the inspiration is a fixed width.

In this step we’re going to:

1. Reset colors for new layout
2. Remove excess outer margins
3. Set base font
4. Get rid of that header gap
5. Change the menu side into a fixed width while leaving the content flexible.
6. Expand footer size more
7. Remove content margin gap

Reset Colors

To begin, we need to change our colors for our new inspiration design. Currently we have:
/* Main div blocks basic styling */
div#header { background-color: fuchsia;}
div#menu { background-color: silver; }
div#content {background-color: teal;}
div#footer {background-color: fuchsia;}
In order to better fit the colors, we’re going to do the following:
For the content area: Use a soft tan for the content, black text, and a header in a forest green.
For the menu area: Make the links white and the heading gray.
For the header and footer: Make the background color a golden yellow.

Make the following changes in the main div block area of your CSS:
div#header { background-color: #FC3;}
div#content {background-color: #FF9; color: #000;}
div#footer {background-color: #FC3;}

Add the following to your CSS for the menu area:
/* Menu */
div#menu h2 { color:gray; }
div#menu ul li a:link, div#menu ul li a:visited {color: white; text-decoration:none;}

Remove Outer Margins

Now that your colors are looking better, the next step is remove the excess outer margins. This is extremely simple. Add the following line to the very top of your CSS:
html, body {margin:0; padding:0}

Set Base Font

The most universally agreed upon base font suggested is at 76% size, so we’ll add the following line just below the one above.
body {font-size: 76%;}

Remove Header Gap

As you saw in the original, we have a gap both above and below the header area. This is caused by lack of sizing (we’ll make it 100px high) and the need to remove the margins that you automatically get with headers (whether h1, h2, etc..). So, let’s add the following section to fix this:
/* Header Special */
div#header {height: 100px;}
div#header h1 { margin:0;}

Make Menu Fixed Width

Our inspiration design features a fixed width menu so we’ll keep that (making it 230px wide), but we want our main content area to remain expandable. Currently in our main div block CSS we have the following:
/* Main div blocks */
div#menu { width: 30%; float:left;}
div#content {width: 70%; float:left;}
div#footer {clear:left;}
What we are going to do is change it to the following (changes in bold):

div#menu { width: 230px; float:left;}
div#content { margin-left: 230px;}
div#footer {clear:left;}
All we did there was change the width of the menu from flexible to 230px, and then tell the content to make sure it keeps a 230px margin on the left (the width of the menu we want to have on the left) so that they don’t overlap.

Expand Footer Size

We’re going to make the footer a bit bigger by setting its size. We’ll remove the margins while we’re there and go ahead and center the text. Add the following section to your CSS:
/* Footer */
div#footer {height: 2em; margin:0; text-align:center;}

Remove Content Margin Gap

Just like with the header, you have a gap above the content area that is caused by that h2 heading. So, we’re going to go ahead and make that go away. While we’re there, we’ll make that h2 heading that forest green, and give the paragraphs and heading a little padding on the left so they aren’t so close to the edge. Go ahead and add this new section to your CSS:
/* Content Styling */
div#content h2 { margin:0; padding: 0 .5em; color:#363;}
div#content p {padding: 0 1em;}

At this point, your page should start looking substantially better and you can begin to see how this is going to turn into a rendition of our inspiration piece. Here is what your page should look like:

In the next section, we’ll make it look even more like that by working on that menu area.

~Nicole

Continue with Step 3