1) Please download Class 06 Starter Code

2) Move the following into your class-work directory:


3) fashion-blog-solution is included

4) Move the following into your homework directory:


Class #06


Page Layout: Floats


• Final Projects:

⇒ First deliverable due Monday, October 22nd

⇒ Project proposal/ideas

⇒ Wirefames if possible!



Q: If you link multiple CSS files, which one takes precedence if there are conflicts?

A: The last style sheet loaded will take precedence.

	<link rel="stylesheet" href="css/boostrap.css">
	<link rel="stylesheet" href="css/style.css">

Q: What are the benefits of Semantic HTML?

A: Beyond SEO, semantic HTML is also used for:

• Accessibility (screen readers)

• Internationalization

• Interoperability (help other programmers understand the code)


Horizontal navigation

display: inline-block

CSS float property

CSS clear property

Horizontal Navigation

How did you build Fashion Blog's nav?

Horizontal Navigation: <ul>
Horizontal Navigation: <a>
Horizontal Navigation: <a>

• Cons of the <a> approach:

<a> tags are INLINE elements

⇒ Cannot set margin-top or margin-bottom

⇒ Cannot set height or width

CodePen exercise

• Can set display: block...but would have to use CSS floats

display: inline-block

Display: inline-block

• Display block elements...inline

• Can still set box model properties:

height / width



Note: IE6 and IE7 do not support display: inline-block

Exercise: Horizontal-Nav

1) Open horizontal-nav in SublimeText

2) Use spec.png and readme.txt

3) Do not worry about pixel perfection



• CSS positioning property

Another tool for rendering block elements inline

• Enables more robust web layouts


• Applied as follows:

	.sidebar {
	  float: right;

• Valid values: left, right, none

• Original purpose: allow text "wrap" around images

• Now: technique for advanced web layouts

Floats + Layout

CodePen Example

Clearing Floats

Clearing Floats

• Floated elements do not give their parent any height:

1) Objects further down the page will render incorrectly

2) If there are only floated objects within an object, it will collapse

• To prevent rendering issues, we must handle, or clear, floats

• Three methods:

1) overflow: hidden;

2) The clear CSS property

3) The "clearfix"

Handling Floats: The Overflow Method

• Add the following to the collapsed element:

overflow: hidden;

• Tells browser to recognize height of the content

• Technically isn't clearing - parent cannot clear child's floats

• Establishes a new block formatting context

• Elements that create new BFC's acknowledge child's floats

Clearing Floats: The Clear Class

1) Define the following in your CSS:

	.clear {
	  clear: both;

2) Place empty div AFTER the floated elements

    <div id="floated-right"></div>
    <div id="floated-left"></div>
    <div class="clear"></div>

Clearing Floats: The Clearfix Class

• Define the following in your CSS:

	.clearfix:after {

• Add the class to the element that has collapsed


Lab/HW: Fashion Blog (pt. 2)

1) Open fashion-blog-part2 in SublimeText

2) Build what you see in design.png

3) Copy found in copy.txt

4) Will have to look up :first-letter

On Deck: #07 - Page Layout Lab

• Floats/Clear review

• Layout lab

Exit Tickets!