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

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!

Aligning Images Using Floats

  • We will look at how to align images using CSS
  • The <img> tag used to have an align attribute in HTML that was used to align images, but in HTML5 that tag is now considered obsolete
  • When a tag is considered obsolete it may still be honored by the browsers, but it is no longer a standard so it should not be used
  • That is why there is no align area within Properties in Dreamweaver
  • The method to align images now is to use the float property
  • This also allows us to add padding at the same time so text does not end up touching the image
  • It is common to create a class called floatLeft or floatRight within a website so the class can be applied to images so they can be aligned within the page element
  • If you assign a padding within that same class your images will always have some space along the one side when they are floated

Aligning Images Using 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
  • Image Tag in Tag Selector 1:34
    • alignRight Class
    • Unused Class, IDs
    • Creating Class
    • .alignLeft
    • Add Float Left
    • Add Padding
  • Adding Class to Image 4:58
    • Code View
  • Duplicate 8:03
    • .alignRight
    • Testing Alignment