Summary 6

Topic 1: The three basic behavoirs for multi-column layouts

There are three basic behavoir options when you are trying to get multi-column layouts, they are: fixed-width, fluid and elastic. Fixed-width layouts end up not changing sized as the user changes the width of the browser or program they are using. S0, users typically end up making the width around 900 ro 1100 pixels wide as those are common screen sizes for computers. Fluid layouts will change their width as the user adjusts the width of the browser or program they are using. While this is a good thing as the layout will better scale on larger or smaller devices, the user gives up exact control of the layout when you use this layout. Elastic layouts will increase the width of the layout when the browser window is widened, but elastic will also end up changing the size of all the content elements. This will cause a zoomimg effect to happen which means everything will get bigger.

Topic 2: Helping with the layout of the columns of a web page

A lot of times when adding content to the columns users create on their websites said columns tend to expand and get pushed under other columns. Most users don't want this to happen. One way to get around this is adding horizontal margins and padding to columns which will move their content to away from the sides. Adding margins will also help as this will create space between each columns which increases the width of the layout. A second way to help with the layout of columns is adding large images or long sequences of characters with no spaces. For example, URLS. These can force the column width to exceed the layout width.

Topic 3: Inner divs can also help with the layout of a page

Inner divs provide a users website with both positioning and styling options. They not only allow for horizontal padding to be added without brekaing the layout of a web page but the can also have an important visual function as they can provide a colored border around the content blocks. The example in the text book shows each article has a different color to show that users can fill the section row container and touch edge to edge to show what an inner div can do. Each box it also spaced out from each other. The horizontal space is achived by using left and right margins that end up pushing the divs away from the sides of their parent article. The vertical space is created by padding on the partent articles.