The goal is to learn how to control the position of objects and use a grid system to assist in the layout of a user interface.

> width property (% width in particular) > float property > margin properties > padding properties > :first-child > :last-child > display property (particularly display:block) > @media tag (particularly max-width and min-width)

Create a CSS layout scheme that will adapt to varying widths of windows. Your scheme should define a class "section" whose contents will occupy the entire width of the browser window. A <div> tag with this class will basically create a row across your window.

Create a class "column" that will define a column within a section. You should define your columns so that each column occupies up to 1/4 of the width of the window. There should be 20 pixel gutters (white space) between the columns.

When the window width becomes less than 500 pixels, your columns should switch to widths of 100%. This will cause the columns to stack vertically rather than lay out horizontally.

Create a web site of your choosing that demonstrates the correct functioning of your layout scheme.

Example use:

	<link rel="stylesheet" type="text/css" href="mystylesheet.css">
	<div class="section">
		<div class="column">
			name: George
		</div>
		<div class="column">
			address: 1234 Mockingbird Lane, Somewhere, AL 12343
		</div>
		<div class="column">
			phone: (123) 456-7890
		</div>
		<div class="column">
			George was born in Alabama at a very early age. His closest relatives
			were his mother and father. He had seven brothers and 4 sisters as well
			as two dogs and a cow.
		</div>
	</div>

It your stylesheet is correctly defined, the above information should appear across the page in 4 equal columns. Each column should wrap if there is more information than will fit. If the window is shrunk to less than 500 pixels then this information should stack vertically rather than horizontally.

Use display:block to make certain that each of your div tags is laid out in a rectangular block rather than flowing into other tags.

Use float:left so that your columns will stack up across the window left to right.

Use margin and/or padding to generate the gutter space

Use @media to control when your columns will lay out left to right and when they will stack vertically.

Use :first-child and :last-child as well as padding-left and padding-right to eliminate gutters to the left and right of the entire section.

Start with an assumption that your display is 960 pixels across and then remove the 3 gutters and divide by 4. This will give you your column width. But you don't want the width in pixels because that is not flexible as the window size changes. Convert your widths into % and then they will flex with the window width.

Submission instructions