Objective:

Choose one layout below. Write the semantic HTML and valid, cross-browser friendly CSS to match the layout comp you choose. Upload to your launcher via FTP.

Layout Challenge 2A

2A: 3 column, fixed

Layout 2A: 3 column, fixed

This is a 3-column, fixed-width layout.

As the browser resizes, the body should be 1000px and stay centered. The colored background should fill the remainder of the browser.

The columns are 200px, 570px, and 230px wide with 30px gutters

The colored boxes in the sidebar menus represent “hover” states for the links.

Layout Challenge 2B

comp-Challenge-2b

Layout 2B: 2 column, fluid

This is a 2-column, fluid-width layout.

The page should have a maximum width of 1000px and remain centered

The columns are 70% and 30% wide with 2% gutters.

Grading points for all Challenges

  • Valid HTML
  • Semantic HTML
  • Concise HTML
  • Valid CSS
  • Organized CSS
  • Concise CSS
  • Appearance matches the mockup and specs
  • Looks good in: modern Chrome, modern Firefox, Internet Explorer (current + 2 versions back)

Extra credit

complete all challenges for the week.