This week's standard lab allows you to demonstrate your understanding of creating basic layouts with floats. You'll create a basic, two-column layout using floats for your Standard lab. Below are an example and instructions for the standard version of lab 10.

About Me (Header Section)

About Me

I have a strong interest in supervising the production of human hair in Suffolk, NY. Have some experience managing velcro in the financial sector. Once had a dream of exporting fried chicken in Mexico. Earned praised for my work researching toy monkeys in the aftermarket. Set new standards for marketing bacon in Las Vegas, NV. Spent 2001-2005 consulting about acne in Naples, FL.

In 2009 I was developing bagpipes in the government sector. Spent a year implementing bathtub gin on Wall Street. Spent 2002-2007 getting to know human hair in Suffolk, NY. Spent several years writing about yard waste in Africa. Developed several new methods for licensing hugs in Ocean City, NJ. Garnered an industry award while researching country music in the government sector.

Are we having fun yet? (Footer section)

Standard Lab

Checklist
  • Two-column/header/footer using floats (3 marks)
  • Organization & layout of HTML & CSS
  • Meaningful comments in HTML & CSS
  • CSS & HTML Valid
  • Extra polish applied to standard lab
  • Three-Column Float Layout + content (3 marks)

Create Your Float Layout

  1. Create a new lab10.html page and put some content into it. Put your lab10.html into your labs folder and link it to the CSS file you create in the next section. (Don't forget to put a link from your index.html page to your lab10.html page!)
  2. Create a new CSS page, name it lab10.css and put it in the CSS folder. Link from your lab10.html page to your new lab10.css page
  3. Plan a layout with at least four divs. Call them header, footer, content and navigation. Put some filler content in the divs
  4. Use floats (do not use the position property) to create a web page layout with two columns and a header and footer
  5. Once everything is working on your local copy of the website, upload the changed files to your lab site
  6. Don't forget to validate your HTML and CSS files - I'll be checking both!
  7. Don't forget to include meaningful comments in both HTML & CSS!

Advanced Lab

Design and create the layout as above, but with three columns plus a header and footer using floats. For full marks, be sure that your content and design are meaningful, and not simply filler.