Advanced Layout

Part 1a

Good CSS layouts can be used on multiple pages and continue to work with different amounts or types of content. Below we'll use "opposing floats" to create two columns that remain in place no matter which one has more content. In the last step we add a background image to create the illusion of equal-height columns. This is often called the "Faux columns" technique, since in fact the actual columns are still different heights.

  1. Identify the container of the two columns and float it left. Also set a width of 650px.
  2. Set a width on .content and float it left.
  3. Set a width on .sidebar and float it right.
  4. Finally, apply faux-columns.jpg as a background-image to the element that will create the "faux columns" effect.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in dolore deserunt mollit animreprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia sunt in culpa qui officia deserunt mollit anim id est laborum. In reprehenderit in voluptate velit esse cillum id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Part 1b

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in dolore deserunt mollit animreprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia sunt in culpa qui officia deserunt mollit anim id est laborum. In reprehenderit in voluptate velit esse cillum id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.