Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Exploring Floats

  • We are going to explore the CSS property of float, and take a look at how to create web page layouts using floats
  • We explore the float concept using boxes on the page to see how floating various page elements can affect other content on the page
  • The boxes are already set up on the page and contain different background colors so you can tell them apart
  • Assign the float property to the various boxes to see what happens to the boxes when the float property is applied
  • You can float left or right, it is like super glue to the side of the page
  • It is called a float because it is floating vertically on the page
  • If we place content before a floated element on the page, the floated element will move down in the browser
  • Use this page to explore the float property

Exploring Floats

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Adding Float to Header 2:16
    • Select Header
    • Layout Icon
    • Resetting Float
    • Preview
  • Code View 5:02
  • Moving Divs in Between Right, Left 5:05
    • Left Float
    • Right Float