Basic Layout Concepts
There are three kinds of layouts:
- Fixed-width - layouts do not change in size, whatever it is set at is what it will be
- Fluid - layouts change in width due to the size of browser
- Elastic - layouts and content within change in width due to the size of the browser
Oversized Elements
There are three ways to protect a site from oversized elements:
- .innerimg{max-width:100%;} - this limit the width to the parents width
- overflow:hidden - this would have to be added to each column and rather than fitting the image, it crops the image
- word-wrap:break-word - this is added to the wrapper around the columns so that all the columns and their content inherit this setting
The Child-Star Selector
The Child-Star is a selector combination to set margins on all the elements in a column without using inner divs.
The Star selector means all elements. The Child selector means the child of.
There are two considerations when using the child-star selector:
- Using margin-top and margin-bottom when setting the vertical space between the child elements
- There is a potential performance hit from child-star, as the whole DOM has to be traversed to determine all potential matches