Web FoundationsWEDNESDAY, OCTOBER 9, 2013

LECTURE 9 : USING FLOATS FOR LAYOUTS, CSS FORMATTING LAB

Using Floats for Layouts

Layouts are where the float property is incredibly useful. We can achieve the traditional two-column layout in a variety of ways; most of them use one or two floated elements. Let’s take a look at a simple example: a two-column website with the content area on the left, navigation on the right, and a header and footer area to cap it off. For the sake of this example, we’re only going to look at the code related to the floated elements.

Floatutorial: Float Tutorial - Learn CSS Layout: Float - Smashing Magazine: The Mystery of the Float Property

#container {width:

960px;margin: 0

auto;}header {

padding: 5px;

background: #c99;

}section {

float: left;

width: 780px;

background: #fcc;

padding-left:5px;

padding-right:5px;

text-align:justify;

}nav {

float: right;

width: 160px;

padding-top:15px;

background: #fcf;

}footer {

clear: both;

background: #c99;

padding: 5px;

}

Ok, let’s talk about what’s going on here. Our containing parent is aptly called #container. This holds our floated elements in place. If we didn’t have it, our floated elements would shoot out to the far left and right of the viewport (our browser window). Up top we have our header. Next, we have section and nav. These are our floated elements. We sent section to the left, and nav to the right, to achieve our two-column layout. I’ve defined a width for each, so that they fill our entire parent container. Finally, we have the footer, on which we’ve set the clear property. As we know from before, this clear property brings the elements following any floated elements back into the normal flow. In this case the footer has the value both assigned to it, causing our footer to sit below both the section and nav elements.

Using Floats for Layouts

What would have happened had we forgotten to assign the clear property to our footer? Our page would look like this:

Our footer has slid up underneath the nav. This is happening because there is room underneath the nav for the footer to fill, and given the normal flow that we work within, this is actually the correct behavior. But it’s definitely not what we’re looking for, is it? You can start to see the interaction between the float and clear property and how they complement each other so well.

Using Floats for Layouts

Some Tips & Tricks: Faux Columns

Demo: "Original" 2-Column PageDemo: Updated 2-Column Page using a "Faux Column"

Discussion: Equal Height Column DebacleCode-Sucks: Faux Column LayoutsVanseo Design: 4 Methods for Creating Equal Height Columns in CSS

Some Tips & Tricks: Using height or display:table

Demo: Using heightDemo: Using display:table

CSS Align: Margin, Position, or Float

DEMO

Crossbrowser Compatibility Issues

body{ margin:0; padding:0;}

http://www.w3schools.com/css/css_align.asp

The CSS Formatting Lab Walk-Through

We're going to walk-through and work-through the CSS Formatting Lab IN-CLASS.

If you have already completed the CSS Formatting Lab and correctly uploaded and linked it in your Portfolio, then you are free to work on other HTML/CSS labs, Communication assignments, or Team Project material.