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.
<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 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.