Columns

Whether or not you base your design on a grid, the chances are that you will have columns of some kind. Creating columns has been one of the more tricky parts of web design. This page looks a bit into the history of how we make columns and gives some resources on how to get it done using the floated divs technique.

Tables: The good, the bad and the ugly

A long time ago in the beginnings of web design people used tables to structure their layouts. The problem with tables is that they were easy to break, they added a lot of extra HTML and screen readers have a hard time reading and navigating through them. At heart the problem is that a table is really for tabular data not for layout. This is also a semantic problem. When a site is semantically valid it means that the elements used describe the content inside of them. When the layout is in tables the semantics break down. That’s the bad and the ugly, what are tables good for? Tabular data where you have rows and columns of information.

Float like a Butterfly, Layout like a Champion

Because of these problems with tables people started using layouts where div elements are used to  mark up the major sections of the site (header, footer, content, navigation etc.) and then the float property is applied to the divs to get them to line up next to each other when needed. This technique works pretty well, but it does require that you learn about floats and sometimes employ some tricky moves to get things to look how you want them to.

Examples

http://www.teachingmultimedia.com/mmp240/layouts/layouts.html

This page has a number of one, two and three column layouts. You are free to take them and use them as a starting point in your designs. To use a layout click on it and then view the source of the page. The page has the HTML and the CSS embedded into it so you can copy it all and then break it up how you like.

One of the problems with using floats is that all of your columns won’t be the same height if the content is different (and it always is). That can be a problem if you wanted to apply background color to the columns. One method is to apply color to a div that wraps all of the columns. To accomplish this you also need a clearing div. Here is a video that shows the technique:

And here are some screenshots of how it looks:

This is the problem. Two columns but the heights are unequal.

To do the solution we need to have a div that wraps both columns, div id=”content” in this case.

Then we add the background color we want on the sidebar to the wrapping div.

It still won’t work unless you have a clearing div that comes after the columns but is inside of the wrapping div (before content ends in this case).

Then you apply the clear property to this clearing div so that the wrapper (#content here) will expand to fit the columns.

Now you get the appearance of equal columns. In reality the sidebar is the same height but the space underneath it just has the same background color thanks to the wrapping div with the same background color.

Another method for making it look like all of the columns have equal length is called faux columns. The basic idea is that you use an image with the background colors you want and put it behind all of your columns (the columns themselves don’t get any background color). Here is an article with an explanation:

A List Apart Faux Columns tutotrial

and here is a screencast of one way to create the background image:

http://www.teachingmultimedia.com/mmp240/screencasts/Screencast-PSD_faux_columns.mov

More Screencasts

Here are some screencasts I made to go through the process of making a two column layout using Floats. The second video shows how to use a clearing div to make the columns look equal in height.
http://www.teachingmultimedia.com/mmp240/screencasts/Screencast-Sample_Layout.mov
http://www.teachingmultimedia.com/mmp240/screencasts/Screencast-Sample_Layout_ClearingDiv.mov
These are resources you will need to follow along with the screencasts:
Image of target layout
Beginning CSS Stylesheet
Beginning HTML page

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>