Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS3 Beyond the Basics

Clearing floats


From:

Dreamweaver CS3 Beyond the Basics

with James Williamson

Video: Clearing floats

Now that we have discussed the basics of floating elements on the page, we need to look at floating elements in a little bit more detail. Specifically we are going to explore the concept of clearing a float. Once you float an element, all other elements on the page underneath it, where they come after within a normal document flow, are affected by the float. In order to stop an element from affecting the rest of the elements on the page, you clear the float and sometimes it's very important that we clear our floats, especially when we are working with floats for layout. I am working with the floats_clearing.htm and you can find that in your Chapter 3, Example Files, if you are following along with me just go ahead and open that one up. We also want to explore the concept of how inline level elements respond to floats and compare that with the way that we know that, block level elements respond the floats. You can see at the top of the page, we have an element named Box 1 and if I click inside of it, I can see that it's a div and it has an id of Box 1.
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Dreamweaver CS3 Beyond the Basics
11h 10m Intermediate Sep 21, 2007

Viewers: in countries Watching now:

Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.

Topics include:
  • Reviewing and customizing the coding toolbar
  • Understanding the CSS Styles panel
  • Using absolute and relative positioning
  • Creating accessible forms
  • Building AJAX pages with the Spry framework
  • Extending templates
  • Working with XML and XSL
  • Building dynamic content
  • Creating custom behaviors in Dreamweaver
  • Running reports
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Clearing floats

Now that we have discussed the basics of floating elements on the page, we need to look at floating elements in a little bit more detail. Specifically we are going to explore the concept of clearing a float. Once you float an element, all other elements on the page underneath it, where they come after within a normal document flow, are affected by the float. In order to stop an element from affecting the rest of the elements on the page, you clear the float and sometimes it's very important that we clear our floats, especially when we are working with floats for layout. I am working with the floats_clearing.htm and you can find that in your Chapter 3, Example Files, if you are following along with me just go ahead and open that one up. We also want to explore the concept of how inline level elements respond to floats and compare that with the way that we know that, block level elements respond the floats. You can see at the top of the page, we have an element named Box 1 and if I click inside of it, I can see that it's a div and it has an id of Box 1.

Well, directly after the div tag, there is a paragraph and it's just a regular paragraph. So all of the text inside the paragraph is an inline level element. So if we were to float box number 1 then I will just go ahead and open up my CSS Styles panel. Once again I am going to resize this panel so that I can see everything including all the properties and I will click #box1 and again, I will probably need to resize this tab a bit too. The CSS Styles panel is very flexible but you are going to find you are going to be expanding different areas of it frequently. So a lot of times when I am working, I will close all of the other panels. I am going to click Add Property and I will type in float and I will just go ahead and float that to the left. And notice what happens when we have inline elements, all the line text is wrapping around box number 1, instead of going underneath it and that's exactly what it's supposed to be doing. If you feel like you have seen this before. Well floating was originally designed so that images could have text wrap around them and when we take an image and change it's align property to left or right, you are actually performing a float. So floats had been around for a long time, we are just now controlling them with CSS. So this looks fine but what would happen if the text was a little bit shorter? We don't want the headline to wrap around the box at all. But if I take the text and I am just going to highlight the bottom portion of the paragraph, if I delete that, I could have a story headline or headline also wraps around the box and that is not what we wanted. We want the headline to definitely stay below the box. Well to do that, we can do what's known as clearing the float. So I am going to go to my h1 selector in the CSS Styles panel and I am going to add a property to it and the property I am going to add is the clear property. Now the clear property has several values and I will grab the pulldown menu, here from our values so we can see that as left, right, both, none, and inherit. None is the default value and inherit just says inherit whatever the clearing value of the parent element is. I am actually going to say clear left. That essentially tells the h1 do not allow any element to float to your left. So notice what happens in our document. The heading 1 breaks back down below the float element and the paragraph is free to continue the float. So by being very selective in how we use clearing, we can take certain elements that are used in floating to control our positioning and make sure that those floats don't affect other areas on your page and we are going to see that that becomes very important, when we begin doing our layout.

Clearing can assist this with one other thing as well. So I am going to Save and Close my floats_clearing.htm and I want to open up another example file. So I am going to go into my Files panel and I want to open up the floats_container.htm. So floats_ container.htm. What we have here is we have an image with a paragraph and they are inside of a container element. So if I click in one of the paragraphs, I can use the Tag Selector down at the bottom to see that, I have a paragraph inside of a div tag with the class container applied to it. Well if I come in and create a brand new selector where I am running selector for the image, so I am just going to do an Img tag and I am going to go to my Box category. This is where we find our floating controls inside the CSS Rule Definition dialog box. The upper right-hand corner, I can go to Float and choose left because I want the text to wrap around me. You can also choose to help padding kind of help you out here as well, so I am going to go ahead and give it a padding same for all of 10 pixels all the way around and that will keep the text from butting right up against the actual image. So go ahead and click OK. You can see what happens, our image remains in place and the text comes up to float around it. The problem is that the containing element no longer is tall enough to contain the image and the reason for that is because remember the image because we floated it is removed from normal document float. So the container doesn't really see it as part of the container any more. So the height of the container is now being driven by the paragraph itself. There are two ways to go ahead and make sure that your containing elements are actually the height that you want them to be and that is containing the floated elements inside of them. There are two ways to do that.

The first way is if that the containing element also has a floated property. It will contain any nested floats. So we will go ahead and try that. So we will go to the container, class style, and I am going to add a property there and I will add a float property and we will float that to the left. As soon as we float, the containing element to the left, it expands to hold its nested float. So I am going to remove that float property and we will talk about the second way that you can make sure your container elements actually stretch to contain a floats. If I look in Code view, so I am going to switch over to Code view.

I notice that after the paragraph, there are no other elements so it's just the image, paragraph, and the div tag. However, if I look in my CSS Styles, there is actually a selector already written for a line break. So if I select the line break, I can see that it has a clear property of both which would clear both the right or left floated elements. So all I really need to do, in this case, switch back to Design view, I am going click right after the paragraph and I will just insert a line break, and that's Shift+Enter or Shift+Return. And because I didn't have an element inside that, that has a clear applied to it. The container will now stretch to fit the entire height of the contained elements. So as long as you have one element inside the containing element that has a clear applied to it, usually you want to do at the very end. It will clear the floats above it and the containing element will again expand to contain all of its nested content including the floated elements. So there are two ways that you can make your parent elements contain all the nested elements including any float elements. One is to give the parent element itself a float property. The second is to add a clear property to at least one of the elements inside a parent element and that will cause the parent element to go ahead and contain all of these nested elements including the float itself. In our next movie, we will use the information that we have learn about floats to create a simple two column floated layout that will serve as the basis for our Cheek Chastain Gallery site.

Find answers to the most frequently asked questions about Dreamweaver CS3 Beyond the Basics.


Expand all | Collapse all
Please wait...
Q: In the Chapter 3 movie “Creating rounded corners with background graphics”, the instructor uses a .last class selector. What are the CSS properties of this selector?
A: The .last selector is as follows:
#current p.last{
background: url(../_images/current_btm_bg.gif) no-repeat bottom
left;
padding-bottom: 2em;
margin: 0;
}
The background is the bottom rounded corner graphic, the bottom padding keeps the type away from the bottom of the box and thus the rounded corners, and the margin ensures that the box elements fit seamlessly with each other.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked