Summary 6

“Chapter 5 - Styln’ With CSS”

Topic 1 - Basic Layout Concepts

"Fixed-width" layouts stay the same width as a user adjusts the window and 960 is a common width because it is easily divisible by many numbers, making calculations for splitting into even columns much easier. "Fluid layouts" change size as a user adjusts the window, which scales better on larger monitors, however the layout suffers due to lack of control of the elements. "Elastic layouts" are like fluid layouts, but the size of the elements are adjusted to fill out the window as the size is adjusted.

Topic 2 - Setting Padding and Borders on Columns

When working with columns in a layout, it can be difficult sometimes to keep the columns next to eachother while adjusting margins and padding. This can cause "float-slip" where the right column essentially moves down to the next row in the layout under the left column. Some ways to prevent this problem include changing the overall width of the element, applying padding/margins to the content, or using the CSS box-sizing property.

Topic 3 - A Three-Column, Fluid Center Layout with Negative Margins

The most difficult part of creating a three column layout is maintaining the right column's relationship to oher elements as the page is resized. One technique to achieve this layout is to manipulate the margins of two wrapper elements surrounding the columns in two groups. The technique known as "faux columns" is utilized to make the columns appear at full height with a wrapper element in the background, using repeating background graphics to make the columns appear taller.