My first post will touch on the topic of how to style your web page using CSS.

Containers

The first hurdle that I came across when I first started designing websites was getting content to display neatly on the page, without the need to scroll, or without having everything crunched over to the left when maximzed. The answer is to create a container to center everything.

#containerExample
{
margin:0px auto;
position:relative;
width:300px;
min-height:100%;
background-color:#000000;
padding-left:5px;
padding-right:5px;
}

I won't get into what exactly each of these lines do. If you don't know what they are, check out w3schools.com for some great information. The most important line here is "margin." Setting margin to 0px auto is what will cause your content to be horizontally centered in your browser. Also of note is "width." You want to choose a width that reduces the amount of empty space on either side, but also one that doesn't cause content to horizontally flow off of most people's screens. It's a balancing act. The width of the container on this site is 900px. With the high resolution that most computers run at these days, that seems like a pretty safe width, though feel free to adjust it based on how you see a width of 900px display on this site.

Footers

This is another thing that I found to be a real pain. Footers have two problems: one, you want them to be locked to the bottom of the page, so if your content doesn't fill the entire browser, the footer isn't in the middle of the page, but at the bottom. Two, if the content vertically flows off the page, you want the content to push the footer down so it appears after it, not on top of it. Below is the CSS for the footer used on this site:

.footer
{
width:100%;
bottom:0px;
height:60px;
position:relative;
text-align:center;
font-family:Arial;
font-size:10px;
}

This is a big spot where your containers come in. We already have a container that holds the entire page (minus the margins), and a container that holds our footer. We need two more: one for your header, and one for your body. The header container can hold your logo and top navigation links, the body container holds everything else: your content, your left and/or right navigation and so on.

Important points:

- Make sure your bottom is set to 0, to lock your footer at the bottom of the page.
- All of these major containers should have a position attribute of relative. In fact, any div that moves your content vertically down the page should be relative. If content that has an absolute position flows off the page, your footer won't move down with it, and you'll see it on top of your content.
- Set your body's container to have min-height:100%. This ensures that your footer will be at the very bottom even if your content doesn't fill the page.
- Your footer must have a height. In tandem with that, your body container should have a padding-bottom of whatever your footer's height is.

Rounded Corners

Where are you CSS 3? This update, when it is released, promises to give us some CSS syntax that will enable us to round the edges of our borders. Rounding corners is very popular in web design; as you can see, even my simplistic site has them. CSS3.info has information on the syntax that we'll eventually see and be able to implement. Unfortunately, for the time being, we're stuck with needing to create images of rounded corners. Can't wait for that feature from CSS 3, but I'm not holding my breath.