Cibgraphics Design Studio

In part 2 we styled the list elements in the first 2 columns. For the last part of this tutorial we are going to go over the web form for the newsletter. Here is our design so we can see what we are going to be creating.

Our form markup is very simple with an input box, label for the input box, and then a submit button.  The markup is something like this:

The CSS is also very simple.

As you can see we used some browser specific code to create the rounded corners on the submit button. It will be styled that way on WebKit browsers (Safari and Chrome) and Firefox.  In Internet Explorer browser it will have the traditional straight corners.

The last thing to do is to create the copyright test below the columns. To make it display right because of the nature of floated items, we will need to clear the floats.  This is done by a clearing element with some simple CSS which goes right after the unordered list in the code.

We have already done the CSS for this element in part 1 when we declared the clear class.

The text on the bottom is just a simple paragraph tag after the clearing div with some very simple styles applied to it.

View the demo of the mutli-column footer. Post any questions you might have in the comment section.