Example 3: CSS for layout

This example illustrates a screen layout technique using HTML <div> tags, class and id attributes, and CSS float, width, and height styles. Your jobs are to edit example3.css to change the layout:

1. Green, blue, red, and yellow forming a rectangle of four identically sized rectangles with green and blue on top and red and yellow on the bottom, and filling the window.
2. Same as above, but make red 2/3 the window width and yellow 1/3 the window width.
3. Green on top, all the way across the screen, yellow at the bottom, all the way across the screen, and the blue and red side-by-side, equal width, in the middle.
4. Red on top, all the way across the screen, blue at the bottom, all the way across the screen, and the red and yellow side-by-side, equal width, in the middle.