Web Foundations WEDNESDAY, OCTOBER 9, 2013 LECTURE 9: USING FLOATS FOR LAYOUTS, CSS FORMATTING LAB.

Download Web Foundations WEDNESDAY, OCTOBER 9, 2013 LECTURE 9: USING FLOATS FOR LAYOUTS, CSS FORMATTING LAB.

Post on 18-Jan-2016

216 views

Category:

Documents

0 download

TRANSCRIPT

BIT112

Web FoundationsWednesday, October 9, 2013LECTURE 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. Lets 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, were 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, lets talk about whats going on here. Our containing parent is aptly called #container. This holds our floated elements in place. If we didnt 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. Ive defined a width for each, so that they fill our entire parent container. Finally, we have the footer, on which weve 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 its definitely not what were 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 ColumnsDemo: "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 CSSSome Tips & Tricks: Using height or display:table

Demo: Using heightDemo: Using display:table

CSS Align: Margin, Position, or Float

DEMOCrossbrowser Compatibility Issues

body{ margin:0; padding:0;}http://www.w3schools.com/css/css_align.aspThe 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.

Recommended

View more >