Topic 1 – Getting Started: Columns

There are three basic behavior options for multi-column layouts: fixed, fluid, and elastic. A fixed-width won’t change size as a user changes the width of their browser window. A fluid width will change as a user adjusts the size of their browser window. An elastic width is similar to a fluid width in that it changes size as the browser window adjusts, but it also changes the size of the content elements. Layout height and width are important topics to understand and can have significant impact on the outcome of your website. Height is typically an attribute that shouldn’t be set – it should be left as auto so it can expand vertically to accommodate the content within it. Width of columns, however, should be carefully controlled. Column width should fit within the browser window, but line length of content within the column also needs to be considered.

Topic 2 - Effect of Padding, Margins, and Borders on Column Width

To create a column, first create a div with an article tag inside in the HTML. In the CSS, set your width, margins, borders, background color, float, and any other properties you would like to set for your div. You can then add additional columns using nav, aside, or article, for example, inside your div. Remember, when adding padding and borders to columns, you need to consider how it affects the width. The sum of the width of all elements must equal and not exceed the total width of the div. One way around adjusting the widths of each element within the div is to add the declaration ‘box-sizing:border-box’ to the CSS of each of the floated columns.

Topic 3 – Multi-Column Layouts

You can achieve a three-column, fluid center layout in one of two ways. First, you can use negative margins to position the right column as the center changes size. This method uses two wrapper elements: the first around all three columns and the second around just the left and center columns. Or, you can make the column containers behave like table cells using CSS3. You can also achieve a multi-row, multi-column layout by writing multiple instances of tags in a page and using contextual selectors to differentiate them.