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:
- 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.
- Same as above, but make red 2/3 the window width and yellow 1/3 the window width.
- 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.
- 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.
Aardvark
Barracuda
Coatimundi
Duck
Fun with flags
Try using these CSS techniques to render the national flags of
- France
- Ireland
- The Netherlands
- Denmark
- Sweden