CSS for layout

This example illustrates simple screen layout using HTML <div> tags, class and id attributes, and CSS float, width, and height styles.

Try to edit edit example5.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.

Fun with flags

Try using these CSS techniques to render the national flags of

• France
• Ireland
• The Netherlands
• Denmark
• Sweden