Web Design Summary 6
Basic Page Layout
Topic 1: Multi-Column Layouts
Structuring your website with columns is an effective way of organizing your content. Some standards for columned layouts are: Two-column layouts; and three-column layouts. Most of the time, columns are used to list navigation links in a vertical style, next to the column with the main content. Sometimes a column is used for things like advertisements, news-headlines, etc.
Topic 2: Floated Versus Absolutely-Positioned Layouts
There are a couple of different approaches to position your layouts. First there's floated columns, which are quick and easy to implement. The columns essentially 'float' up next to one another. With this approach it becomes easy to create fluid and responsive layouts. When using floated columns you must be very careful not to make the widths too wide—if a column doesn't have enough space it will be pushed under the other columns. Absolute layouts don't share this problem—which is one of their advantages. However, because absolute layouts are very locked in place they make fluid and responsive layouts slightly more difficult.
Topic 3: Making All the Columns the Same Length
One of the differences between table layouts and div layouts is that the latter does not ensure that the columns will be the same length. In div layouts, the column simply sizes itself to fit the content within it. One solution is to manually give the columns the same height. The problem with this approach is that you lose flexibility. Two more suitable solutions are as follows. First there is the solution of faux columns—this method essential has you create a replica of the column graphic and place it in the background, in turn filling the empty space. The second method is to program the divs to extend. This method requires you to add Javascript that makes all columns match the height of the longest column.