Moving regions left and right

See more about:

Where are we?

You know how to add space around an element. Let’s see how you can move an element to the left or right of a page. This is how you position the left and right regions in a page layout.

This lesson’s goals

By the end of this lesson, you should:

  • Know what floating an element means.
  • Know how to set the width of floated elements.

Floating text

We talked about floating images before. You can also use the float property with entire sections of a page. This lessons digs into float a little more.

Let’s start with this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Floating</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 5px;
        padding: 5px;
      }
      #text2 {
        color: #00A000;
        border: 2px dotted #00A000;
      }
    </style>
  </head>
  <body>
    <h1>Floating</h1>
    <p id="text1">I am text 1.</p>
    <p id="text2">I am text 2.</p>
    <p id="text3">I am text 3.</p>
    <p id="text4">I am text 4.</p>
    <p id="text5">I am text 5.</p>
  </body>
</html>

Figure 1. Floatless

It looks like this:

Floatless, rendered

Figure 2. Floatless, rendered

This is normal flow. HTML elements are drawn on the page in the order they appear in the HTML file.

Let’s mess with text2. Change its CSS to:

#text2 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: right;
}

Figure 3. The first float

Line 22 is new. Here’s what it produces:

The first float, rendered

Figure 4. The first float, rendered

When an element has a float, it is taken out of the normal flow. Everything below it is moved up. So when text2 floated, text3 moved up.

What happens to the floated element? It’s pushed to the left or right of the browser window, depending on whether it was float: left; or float: right;. Figure 3 used a float: right;, so text2 goes to the right.

I shrank the browser window for the screen shot.

You can try it.

Here’s what happens when I tell text2 to float: left.

#text2 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: left;
}

Figure 5. Float left

Float left, rendered

Figure 6. Float left, rendered

When you float something, the normal elements wrap around the floated one. That’s what text3 and text4 are doing.

Let’s float both text2 and text3.

#text2, #text3 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: right;
}

Figure 7. Two float

Two float, rendered

Figure 8. Two float, rendered

They float together.

But look carefully at the screen shot. text3 is to the left of text2. That’s because text2 was the first thing to float, and it got pushed to the right. Then text3 was floated, and it was pushed to the right. But it couldn’t go as far, because text2 was already there.

Let’s float them to the left.

#text2, #text3 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: left;
}

Figure 9. Two float left

Two float, rendered

Figure 10. Two float left, rendered

I added another text element, so you could see that the wrapping was working.

Now, suppose I wanted 2 and 3 next to each other, but wanted 4 and 5 to start below them, like this:

Separating 4 and 5, rendered

Figure 11. Separating 4 and 5, rendered

I would add this rule:

#text2, #text3 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: left;
}
#text4 {
  clear: left;
}

Figure 12. Separating 4 and 5, code

The clear: left; in line 25 tells the browser that there should be no floated stuff to the left of text4. This puts text4 in its own line, and everything flows normally from there.

Exercise: Conversation

Here are some images for this exercise:

CC

Renata

Create a page like this:

Conversation

Figure 1. A conversation

Start with this code:

img.conversation {
   float:
   clear:
   margin: 10px;
}
p.conversation {
   float:
   clear:
}
...
<img class="conversation" src="cc.jpg" alt="CC">
<p class="conversation">Hi, Renata. What's shakin'?</p>

clear is the key to this exercise. Think about what doesn’t have stuff to the left, and what doesn’t have stuff to the right.

Upload your solution to your server. Add the URL below.

(Log in to enter your solution to this exercise.)

B things

Here’s another example that combines floating with containership and overriding. Suppose we want this:

B things

Figure 13. B things

Here’s some code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Floating</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 10px;
        padding: 10px;
        clear: left;
      }
      .b_thing {
        margin-left: 20px;
        border: dotted 2px #888888;
        float: left;
        clear: none;
      }
    </style>
  </head>
  <body>
    <h1>Floating</h1>
    <p>Here are some B things.</p>
    <p class="b_thing">
      <img src="blueberries.png" alt="Blueberries" align="middle">
      Blueberries
    </p>
    <p class="b_thing">
      <img src="buffalo.png" alt="Buffalo" align="middle">
      Buffalo
    </p>
    <p>They are some B things.</p>
    <p>Did you like the B things?</p>
  </body>
</html>

Figure 14. B things code

Look at the HTML first. Lines 31 to 34 create the blueberries container. It has an image and some text.

The blueberries image and text have a border drawn around them both. This is because the border is drawn around their container, not the individual elements. The container is the <p> the image and text are inside. That <p> has class="b_thing". The class has a border (line 22).

The blueberries image and text also float together. Again, it’s because they’re in a container, and the container is floated.

Understanding that containers can be moved around is a key to making layouts. You groups elements together into a container, and then move the container where you want it.

Onward.

Lines 15 to 19 set the style for the <p> tag. All <p>s will get margins and padding, and nothing will float to their left (line 18).

Lines 20 to 25 override some of those settings for <p>s that have the class b_thing. The left margin is increased a little, a dotted border is set, and they’re floated. The clear: none; overrides the clear: left; in line 18.

Let’s explore two of these settings, so you can see why I used them. First, let’s look at the margin-left. Without it, the page looks like:

No extra left margin

Figure 15. No extra left margin

Normal paragraphs don’t have a border; only b_things do. That’s why Figure 15 looks like the border on b_things juts out to the left. It doesn’t really jut out, it just looks that way because the other <p>s don’t have borders.

I thought it looked better when the border lined up vertically with the text above and below it:

B things

Figure 13 (again). B things

So I added the extra margin space on the left of b_things.

Now let’s look at that clear. Here are the rules again.

p {
  margin: 10px;
  padding: 10px;
  clear: left;
}
.b_thing {
  margin-left: 20px;
  border: dotted 2px #888888;
  float: left;
  clear: none;
}

Part of Figure 14 (again). B things code

Suppose I dropped clear: none; (line 24):

p {
  margin: 10px;
  padding: 10px;
  clear: left;
}
.b_thing {
  margin-left: 20px;
  border: dotted 2px #888888;
  float: left;
}

Figure 16. clear:none; gone

Here’s what I would get:

clear:none; gone, rendered

Figure 17. clear:none; gone, rendered

The two b-things are no longer next to each other. Why? Because the clear: left; in the rule for the <p> tag (line 18) applies to them as well. They’re <p>s. Remember that clear: left; tells the browser not to let anything float to the left. So nothing is allowed to float to the left of the buffalo.

Adding clear:none; in line 24 overrides the clear: left; setting in line 18. But only for elements with the class b-thing.

Renata
Renata

This is starting to make my brain hurt.

CC
CC

Mine too.

Kieran
Kieran

Mine too. This can get very complicated.

In practice, when I create a new Web site, I borrow a layout from a Webber who is a CSS expert.

CC
CC

So why are we learning this?

Kieran
Kieran

Because you’ll need to change what the Weber created, to add your own branding and such. I recommend making small changes only. But you will still need to move things around.

More on this later.

Floats and widths

Earlier, we saw this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Floating</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 5px;
        padding: 5px;
      }
      #text2 {
        color: #00A000;
        border: 2px dotted #00A000;
      }
    </style>
  </head>
  <body>
    <h1>Floating</h1>
    <p id="text1">I am text 1.</p>
    <p id="text2">I am text 2.</p>
    <p id="text3">I am text 3.</p>
    <p id="text4">I am text 4.</p>
    <p id="text5">I am text 5.</p>
  </body>
</html>

Figure 1 (again). Floatless

It looks like this:

Floatless, rendered

Figure 2 (again). Floatless, rendered

That dotted area. How wide is it? Let’s look at the entire browser window.

Floatless, rendered

Figure 18. Floatless, the entire window

That dotted area stretches across the entire window.

The CSS property width sets the width of an element. Like this:

width: 200px;

But what if you don’t use the width property? The browser uses the default. The default for width is to make the element stretch across the entire window. That’s why Figure 18 looks as it does.

Well, kind of. It’s a bit more complicated. The default width actually depends on whether the element is floated.

Here’s some more code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Widths</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 5px;
        padding: 5px;
        border: 2px dotted #00A000;
      }
      #text2 {
        float: left;
      }
      #text3 {
        width: 200px;
        clear: left;
      }
      #text4 {
        width: 200px;
        float: left;
        clear: left;
      }
    </style>
  </head>
  <body>
    <h1>Widths</h1>
    <p id="text1">I am text 1. No width, no float.</p>
    <p id="text2">I am text 2. No width, float.</p>
    <p id="text3">I am text 3. Width, no float.</p>
    <p id="text4">I am text 4. Width, float.</p>
  </body>
</html>

Figure 19. How width and float interact

Here’s what you get:

widths and floats rendered

Figure 20. widths and floats rendered

text1 and text2 show the differences in default widths. text1 shows that when there is no float, the default width is to stretch across the page. text2 shows that when there is a float, the default width is to take just enough space to fit the content. You won’t be able to predict the width very easily.

text3 and text4 shows what happens when you give a width. You get the width you ask for.

Exercise: Non-table Table

Here are some images to use for this exercise:

CC

CC

Renata

Renata

Create a page that looks like this:

Non-table table

Figure 1. Non-table Table

But don’t use the table tag!

Here’s some HTML to get you started:

<p class="start_of_row">
  <img src="cc1.jpg" alt="CC"><br>
  This is CC.
</p>
<p>
  <img src="cc2.jpg" alt="CC"><br>
  This is CC, too.
</p>

Figure 2. HTML

The class start_of_row starts a new row in the table. There is nothing to the left of a cell that is the first in a row.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

But wait, there’s…

...more. A lot more. For example, what happens when you give an element a width that’s too narrow to fit its content? Maybe you put an image that’s 250px wide into a <p> that’s only 200px wide.

Well, it depends. The image might stick outside of its container. The image might be cut off. There might even be a scroll bar! It depends on other settings.

We’re not going to go over all of the details. But I hope you’re getting that idea that CSS layout can be hard to do.

Simple modifications of an existing layout, well, you’ll be able to handle that. But doing anything complicated from scratch can be frustrating.

Summary

  • Floating an element takes it out of normal flow.
  • Floated elements move left or right. Other elements wrap around them.
  • The clear property lets you control whether things are allowed to float to the left or right of an element.
  • By default, floated elements take just enough space to show them.

What now?

So you make a layout, but it doesn’t look right. Figuring out what is causing the problem can be a pain. Could be a margin, could be a padding. Maybe a float doesn’t do what you expect.

Let’s look at some tools that can help.


How to...

Lessons

User login

Log in problems? Try here


Dogs