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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • 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!

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
  • Open float.html which contains a single box on the page
  • Use the header div & add the float left property and view the page
  • Next change the float to float right and preview in the browser
  • Note how it is like super glue to the side of the page in the browser
  • It is called a float because it is floating vertically on the page
  • If we place content before this header id on the page, this box will move down in the browser
  • Add an image to the page in front of this box by dragging one out from the Assets panel
  • You can see how this box moved down to perfectly accommodate the image
  • You can use this page to demonstrate the power of floats for creating multiple column page layouts
  • Turn on another box on the page, select the left ID and disable display:none on the page
  • Disable display:none for the right column
  • Change the right column to float:right
  • We can use this type of float, but the left & right columns will be very far apart if we have a larger screen width
  • You can place these 2 boxes into an outer wrapper so they stay together no matter the screen size
  • Go ahead & use this page to play a bit so you can begin to understand floats
  • They are a strange concept but make page layouts much easier to create

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
  • Float Property 0:05
  • Preview in Browser 1:14
  • Display Boxes 1:31
  • Float Left Property 4:32
  • Float Right Property 8:00
  • Summary 10:18

Transcription: Exploring Floats

We are now going to explore the CSS property of Float.0000

The Float property is more than likely unlike anything you have thought of before; so I tend to find that people get a little confused by this particular property.0005

But this is more the standard way that you will be positioning content on a web page, so it is important to understand what a Float means.0016

I have a page set up for that purpose (it is called floats.html) in your Course Files.0025

I only have one box of content showing; you can see it says "header div" within the box.0033

Right now, let's take a look at what is available on this page.0040

First of all, I have a header div; and I'm going to go ahead and close up my Files area so we can get a good look at the CSS properties.0045

In my header area, you can see I have a background color, and this is just a basic 300x300 box.0056

I do have a property called Float that right now is disable, because it has the little red circle in front of it; and this is a left Float.0064

What I am going to do is put this particular page in the browser.0074

Let's take a look at where it ends up: you can see it's identical to how it shows up in Design View in Dreamweaver.0081

There is our Float.0089

I'm going to add another box; I have, actually, three other boxes available on the page: I have a left, a right, and a footer down below.0091

Basically, this is a header and footer page with two boxes in between: one that is going to go on the left side and one that is going to go on the right side.0103

When I select the left box, notice, I have a property called Display none.0112

What that is doing is hiding this content: if you see on a web page that there is content that appears after a certain period of time, or you click a button and it appears, this is more than likely the property they have assigned to it.0120

What Display none does is literally remove the content from showing in the browser.0137

If I disable Display none, you will be able to see that I definitely have a left div.0143

Now, what I am going to do is do the same for my right div.0150

I have a Display none here; I am going to turn that off.0155

I'm going to make all of these boxes show.0160

Now, what you are looking at is the basic default behavior for a div tag.0164

What happens is: HTML puts each div (or each box, as you can reference it) on its own line, one under another.0170

So, a column content is not at all the native way that HTML tends to display content.0180

I'm going to go down to my footer and turn off the Display none, as well; and I have assigned these different colors, just to make it easy for you to tell what box is what.0188

I have also put the name of the box within that specific box of content.0199

This is a good page for you to play around with to really understand the process of a Float.0205

Now, let me put the page in the browser now: I'll go ahead and save it...0213

Now, these style rules are sitting on the page, so when I save the HTML page, it is also going to save my changes to the CSS rules.0219

Here are my div tags, each one named, and notice what HTML did: it just puts one right after the other.0230

How do I deal with setting up a column structure?0240

Well, I am going to keep my header div up at the top, and I am going to keep it the same size of 300x300; normally a header, more than likely, would be wider.0245

But for the sake of this exercise, I am going to keep it the same.0256

So basically, I want my header first; then I want my left and right boxes side-by-side; so I need to add some kind of CSS rule in order to do that.0260

What I am going to do is take my left div (and I have these all set up for you); I have a Float property, Float Left, on this particular box; I am going to uncheck this, because I have it disabled right now, and look at what happened to my content when I set it to Float Left.0272

Let's take a look at it in the browser when I did that.0297

What a Float does is remove the content from the normal flow of the HTML piece.0301

In this example, look at what happened: this is actually where my footer div ended up, and I have some additional text underneath it.0310

So, you can see, doing a Float of my left div messed up my page; so let me go back.0322

I'll turn off that Float for the left div; I'm going to move over to the right div--let's try it there.0329

I have a Float property here that is also disable; so we are going to take a look at this one now.0340

I am going to remove the Float...or the disablement of the Float, actually; so let's say...and what I did was turn on the Float for the right div.0347

Let's put that in the browser and see what happens.0361

Now, I have it on my right div; can you see how that Float...whatever I do the Float on, the content that is immediately following it tends to have a few problems?0366

This time, I put the Float on the right div, and all of a sudden, my footer isn't displaying correctly.0379

If you float an element on your page, it can disrupt the content that follows it.0386

So, how can I go about getting the left and the right side-by-side?0395

Well, what I am going to do is put a Float Left on both of them; now, you can see, they are perfectly side-by-side.0400

So, my left has a Float Left; my right has a Float Left; so they are both floating left.0409

I'll put that in the browser, just so you can see; and I'll put this one in Internet Explorer.0419

You can see, even in the old Internet Explorer (version 8), it still works just fine.0427

But my footer has a problem: because these two have a Float on it, it has really been moved from the normal flow of the page (which is one thing right underneath one another).0433

The footer div is messed up, because the whole page isn't understood correctly by the browser.0447

Usually, when you use Floats on content, there is another concept that you have to use along with it; otherwise, any content that follows your Floats has a problem; and you can see that demonstrated here.0455

But I do have my left and right div alongside one another; but what I had to do to do that is put a Float on both of these.0471

Now, what happens if I do a Float Right?0480

Basically, you can only float left or right--nothing in the middle: CSS is a bit picky about that.0484

So, what I am going to do is take my right ID, and instead of floating left with my right ID, I'm going to float right.0492

And this gives you a better idea of what a Float does.0502

Technically, a Float removes that content from the normal flow of the page, and you can think of it like supergluing, either to the left or the right.0506

The reason it is called a Float is because it floats vertically; if there is content above the Float, it pushes it down; if there is content after the Float, sometimes it can modify things there.0516

But it is all based on a vertical Float, depending on the content (usually) that goes before it.0528

So, here is my right div; let me show you what I mean by the "superglue piece."0536

I'll put this into the browser; and I'm just using Chrome because it is the first one listed.0542

Now, as I move this, you can see how that right div remains on the right side, and the left div remains on the left.0549

Now, here is the interesting piece of a Float: you can see, it's kind of jerky when I'm resizing my browser, so I'll stop for a second.0558

But as long as there is no room for the content that is floating, watch what happens to the content: it pushes it down on the page.0566

That is what we mean by floating vertically: there is no longer enough room; this is too wide to sit on the left-hand side, so what it does is move down; but it still remains on the right-hand side, just like it is superglue.0577

When you are floating content, it can tend to bounce around like this, depending upon the width of the browser window that is viewing it.0593

There are a couple of other pieces you usually have to add to a basic Float to prevent those types of behaviors.0602

We also need to take care of the footer div down here; but that is a different concept, called a Clear.0610

That is exploring the concept of a Float and giving you a visual description of what a Float does.0618

That is the Float property for CSS positioning, and you can see, Dreamweaver makes it very easy to see what is going on and see what your properties are and quickly change them.0627

You can play around with this concept a little bit, right within Dreamweaver.0640

That is the CSS property called Float.0646