float propertyUse the float property to create a two-column layout. Be aware of collapsed containers. When you design your sites, and you use one external style sheet, you'll need to anticipate possible collapsed containers by using either the clearfix or the overflow fixes. In these designs, you'll use clearfix.
You will use id selectors to style your wrapper, banner, sidebar and colophon. You'll use an element selector to style your main. You'll use a class selector for the clearfix that will fix the collapsed container.
Important: you must use the selectors specified above. Do NOT use element selectors except to style the main. You will be using an embedded style sheet.
The semantic structural tags are complete, but you will need to add a div to each page so that you can create a fixed-width centered layout.
You also need to add the proper ids to the layout elements: banner, sidebar, menu, colophon. Our PDF lecture notes have more details about this. These ids let you use id selectors to style the "big picture" layout more easily.
The live space in each layout is 990px. The sidebar is 320px wide, and the interval between the sidebar and the main is 15px. Remember how to get the appearance of two side-by-side columns! Margin does the trick. The video tutorials should help you with this. (note: there is no reason to ever use this layout in your designs; it is far too narrow)
Also take note: when you float an element, the box becomes "boxy" and the margin in the h2 tag calculates from the edge of the box, not from the element above it in the layout. Why? Because the floated element has left the normal flow, so there *is* nothing above it in the layout to calculate from. You'll see that in the screen shots. Normally you'd correct for that but I left it in so you could see it.
You will float the sidebar to the left.
Use a border in the banner and the colophon. Use a background color in the body, wrapper, sidebar and main. Choose whatever colors you like.
You will float the sidebar to the left.
You'll have a collapsed container. The best solution in this instance is to use the clearfix class in the colophon. In a real website, you'd put that class on every page, even if you did not need it, because it makes it possible to adjust your content and not worry that your layout will break because of a collapsed container.
Use a border in the banner and the colophon. Use a background color in the body, wrapper, sidebar and main. Choose whatever colors you like.
You will float the sidebar to the right.
Use a background color in the body, the wrapper, the banner, the sidebar, the main, the colophon.
You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.