pdf of assignment

Designing with CSS
Assignment Three – Floats for 2 Columns
Advanced Web Design – Assignment #3 September 8, 2010
Floats for Columns – Sports Theme
Class Assignment:
1. Today’s assignment must be called Floatlayout_lastname
2. Using any sports theme you would like, create a webpage with a
container div, header div, sidebar div, maincontent div, and
footer div.
3. The sidebar must be floated left.
4. The mainContent must have a large left margin to leave space
next to the floated sidebar
5. Must have a footer that has the .clearfloat class applied to it
6. Two divs must have background images in them.
7. Use line spacing to get a nice flow to your text.
8. Remember to use padding and margins to position items.
9. Make the page have pleasing color combinations
CSS Cheat Sheet
Typical Page Layout using divs in the xhtml are :
Insert a div called header
Insert a div called sidebar
Insert a div called main content
Insert a div called footer
And then put a div all around the above divs. Call it container. Be
sure all the divs are inside of it.
After you have entered content onto your page and you have
wrapped them in divs, you are ready to change the “look” of the page
with CSS. Here are some tips that you will use over and over:
Body tag = specify the font, font size, font color, background page
color, and
• set your margin and padding to 0 (this is good practice to zero

out the default settings of different browsers built in style sheets
that add spacing)
• and set the text-align to center (this is a workaround to center
the container in Internet Explorer – be sure to set the text align
back to left in the rule below for the container)
CSS Rule for the container div = set the width of the container –
maybe
780 - 900, background color, and to center this div set your margins
to auto auto on the right and left to center this div and text-align to
left to get your text back to the left after setting it to text-align center
on the body tag.
CSS Rule for the header div = set the background color and any
padding so that your text or image lines up where you want it.
CSS Rule the header h1 tag= set your margins to 0. This helps to set
the element to the specs to will add. Add padding as needed. Set your
color of the heading and size and font to what you would like
CSS Rule the sidebar div = If you are using “floats” to give a 2 column
layout, then you might float this sidebar div but BE SURE to give it a
width.
All floated elements should have a width specified. We might choose
around 200px depending on the size of your container. If you give it a
background color, it will only have this color as long as there is
content.
CSS Rule the main content div = If you are using “floats” to give a 2
column layout, YOU MIGHT set a very large LEFT or RIGHT margin
on one side of this div. Ex. margins 0 0 0 250px. It will keep all of the
content over to one side. If you do not do this, then the content will
flow next to the sidebar and all around it.
CSS Rule for the footer div = You can put a background color or
image behind the div and remember to use padding to control the text
inside of this div. If you are using “floats” to give a column layout,
then you must CLEAR
THE FLOAT on the footer div. (See following tip)

Classes for floating = Often rules are set up for floating elements
right, left and also to clear the float. Remember classes are generally
created and then you must apply them in the drop down in the
Property Inspector. Typical classes for floats are called .fltlft, .fltrt,
and .clearfloat
Other css rules you might create would be rules for paragraphs – p
tag and
more complex rules such as #footer p = paragraphs that are in the
footer only. Etc.