– Basic layout concepts.
The first layout is a fixed-width layout. They do not change size as the user changes the width of the browser window, and they are typically around 900 to 1100 pixels wide. The second layout is a fluid layout. They change their width as the user adjusts the width of the browser window. Amazon.com has a fluid center on their pages, adding white space around content elements to center them when the columns are widened. The third layout is elastic layouts. They are like fluid layouts, and they also change the size of all the content elements.
Topic 2
– Layout Width.
The width of your layout needs to be carefully controlled, so that the layout fits within the width of a reasonably sized browser window, and so the text line lengths don’t get too long or short. While you want to set the width of columns, you don’t want to set the width of the content elements within them, but you simply want to let the content elements expand to fill the width of the column. Simply let the width of the columns set the width of the content within them.
Topic 3
– Setting padding and boarders on columns.
Adding horizontal margins and padding to the columns to move their content away from the sides, or adding margins to the columns to create space between them increases the width of the layout, and causes “float-slip,” this is where the floated right column no longer has room to sit next to the others, and it slips down under the left column. Adding large images, or long sequences of characters with no spaces such as URLs, can force the column width to exceed the layout width.