Floats

Part 1

Assigning multiple classes to an HTML element can be a powerful way of controlling formatting in a more flexible, modular way:

1. At the beginning of the two paragraphs below, a span is wrapping an image and caption. Use imagecap to make a caption style: make the text color a small, all-caps sans-serif in gray. Also remember to letter-space the text, since it's all-caps.
2. The span has one other class: left or right: Write rules to float them left or right. Check your work and add padding on the appropriate sides of the span so that the image/caption are separated from the surrounding paragraph.

A Subheading

The Nashville sky line Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The Nashville sky lineQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia sunt in culpa qui officia deserunt mollit anim id est laborum. In reprehenderit in voluptate velit esse cillum id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Part 2

1. Write a rule that adds a the background color #bbf6ff to ul#gallery. Add 15px of padding to ul#gallery and float to the left. This is called floating the container and is almost always a good first step when you plan on floating the contents of an element.
2. The images and captions below are marked up as a simple unordered list: the most common way of marking up a gallery of thumbnails. First style the captions to be like the captions in Part 1.
3. Use CSS to remove the bullets and float the list items (li) into a grid of thumbnails.
4. Most likely the different caption lengths will be messing up your grid. What CSS rules can you add to solve this?

• 
  The Nashville Skyline
• 
  The Nashville Skyline. But this caption is longer.
• 
  The Nashville Skyline
• 
  The Nashville Skyline
• 
  The Nashville Skyline. But this caption is longer.
• 
  The Nashville Skyline
• 
  The Nashville Skyline
• 
  The Nashville Skyline

Part 3

Woohoo, a form!

1. The markup below is very common: a form tag containing multiple groups of labels and inputs, with those pairs wrapped in divs for convenience. Let's use floats to create a cleaner arrangement between the labels and their fields:
2. Target #contact-form and give it some padding and a light gray background color (#eaeaea)
3. Remember, the div tag is just a generic, block-level container. It doesn't always need an id or class to be useful. Target all the divs in #contact-form and float them left. Optional: shout "Floating the container!" out loud. Add a 1px white bottom border and top- and bottom-padding to these divs, too.
4. Now we'll attach the pair of tags inside the divs and use the "opposing floats" technique. First, target the labels. Set them to be small, sans-serif, and bold. Give them a width and float them left.;
5. Everything probably looks crazy: we still need to do the second half of "opposing floats." Target all the input tags in the #contact-form, give them a width, and float them right. Now tinker with the widths until your form looks good. Hint: since your essentially creating two columns each set of floats, make sure the widths add up to 620px or less.
6. In the same rule, refine your input styles: turn off borders and add padding. Also set the font to a light gray color.
7. The last div in the form pairs a label with a textarea instead of an input: go back up to your selector, add a comma, and get the rule to apply to this pair as well.
8. Since your default style is now gray, lets add a rule specifically for the form the user is typing into: Use the :focus pseudo-class to set the color to black.
9. Lets say we want to provide the user with a cue about which fields are required, as they're inputting they're text. Use the .required class in conjunction with :focus to add a blue border around those particular fields.
10. Finally, add some margin to the submit button to left-align it with the input fields.
11. Bonus: go back to your rule for the labels and add text-align:right;. Does this improve or detract from legibility/usability?