float example
Floats
Instructions:
- Give the section with the class float a 700 pixel width and center it. Hint. The section is a block element, so text-align: center; does not work.
- Add a 3 pixel grey border on the bottom of the header tag.
- Display the menu horizontally across the page.
- Remove the underline from the links and color them white. Color background red.
- Give links a 10 pixel margins, 10px 20px padding and set their display to inline-block.
- Style the hover green.
- The left and right columns are to be exactly 150 pixels wide. Color the background "silver".
- The center column is to be 400 pixels wide and the background is colored #ddd;.
- Using floats, position the three content boxes so that the web page is a 3 column layout.
- Add 20 pixel padding to all columns. Hint. All columns are divs.
Make the float layout responsive.
- When the screen goes below 700 pixels set media queries to true: @media screen and (max-width: 700px) {}
- Display the navigation list items as blocks.
- Set the width of navigation links to 100% and center the text. This works because the links are displayed as inline-blocks.
- Set column width to 100%. This stacks the floats.
- Add 10 pixel padding to the sides of section elements.
Right column