Lesson 4.1: Layouts – Floating

In our previous lessons we learned about colors and the various properties that affect the dimensions of the elements. Now, it’s time to move
onto laying out those elements into our website, so we can have something beyond a simple stack of elements.

The Default Layout

As you may or may not have noticed by now, by default, each block level element simply stacks on top of each other, one after another. If you
have a two divs, the first one will be placed, and then the second one will be placed below that. This is sometimes called “stacking”, and
is essentially a one-dimensional positioning of HTML elements.

However, rarely will we ever want this one-dimensional layout. So, we have to
use CSS to allow us to change this one-dimensional layout into a two-dimensional layout; allowing us to place elements both in a vertical
and horizontal order. There are two primary ways to accomplish this: floating and absolute positioning (AP).

Floating

Floating refers to using the “float” property, which allows you to make an element “float” either left or right. When you float an element,  it is sort of like you are lifting that element off the page (non-visually) just a bit, so that another block level element will move next  to it, but won’t fall under it (if you are careful).

As I said a moment ago, float can be either left or right. The float property can also take the value of inherit, which using the value  that it’s parent has, or none, which cancels any float it may have.

When you float left or right, it will move the element as far to the left or to the right as it can. It will however still take into account padding, so you can use padding to nudge it over as wanted.

From Design to Floating Layout

As you may have realized by now, since you only have left and right, no middle or anything else, to do more than a two-column layout you have to get a bit creative. Basically, what you’ll do is group things down until you can put everything at either a left or right. Take a look at figure 4.1.1 below:

Figure 4.1.1: An example practice layout.

The black outlined boxes are divs that we want for our content. We have a banner, menu, left content, right content, and a footer. The red boxes are extra divs we will need to be able to float everything properly. Our HTML is fairly simple. We just create a div for each of those borders, starting from the outside and working our way in, nesting the divs in accordance to what they are inside. We’ll also give each div an id, though this isn’t always required. Here is the body element HTML code:

<div id="outer">
  <div id="banner">Banner</div>
  <div id="menu">Menu</div>
  <div id="inner">
    <div id="left_content">Left Content</div>
    <div id="right_content">Right Content</div>
    <div id="footer">Footer</div>
  </div>
</div>

Quote straight forward, no?

Now that we have the divs, we can start applying the CSS.

Setting up the Dimensions

Since we covered how to use Dimensions in a previous lesson, I’m not going to explain this too much. For simplicity sake, we’ll have everything be a fixed-size, though usually you’ll want at least one direction to be flexible. Here is the CSS to set up our dimensions:

div {
  /* If we don't specify something else, the divs margin and padding will be 0. */
  margin: 0;
  padding: 0;

  /* So we can visually see our divisions. */
  border: 1px solid black;
}

#outer {
    height: 400px;
    width: 400px;
}

#banner {
  width: 100%;
  height: 150px;
}

#menu {
  width: 150px;
  height: 340px;
  margin-top: 10px;
}

#inner {
  width: 250px;
  height: 340px;
  margin-top: 10px;
  padding-left: 10px;
}

#left_content, #right_content {
  width: 115px;
  height: 300px;
}

#footer {
  width: 100%;
  margin: 10px 10px 0; /* 10px top, 10px right, 0px bottom, 10px left */
}

If you look at that, it’ll look significantly different then what we intended, since the boxes will stack on top of each other. Also, if you notice, we didn’t make room for each of the borders. These borders are mainly for debugging, which means we’ll remove them when we get everything set up.

So, we don’t both changing everything since we’ll be tweaking stuff. It may cause things to get a bit misaligned, but if you remove the border it’ll line up.

Make them Float

Now comes the easy part. If you look at our image we see that outer won’t need to float, it’s in the middle. Same with the banner. The menu will need to float left. The inner will then need to float right. Within inner, left content is floating left, and right content is floating right. Footer is in the middle, so it doesn’t need to float.

So, here is our code:

#menu, #left_content { float: left; }
#inner, #right_content { float: right; }

It’d take a ton of words that are just convoluted to describe the floating. But, if you just take a moment and study the figure and what we floated, it becomes pretty easy to see why we floated what we floated.

The outer and inner divisions were used after we looked at the black ones in the most logical way. This takes a bit of practice, but once you do it just takes a glance to see how you have to group things for the easiest method.

A Slight Hiccup – Clear It

One thing about floating is that it slightly raises up those elements that float, meaning that stuff that isn’t floating may slip out of these boxes and cause weird things to happen. In our example, the one that would do that is our footer.

It won’t manifest in our example because everything has a static height. However, if we didn’t have the static height the footer would get positioned in an odd place. To fix this, we would set the footer with the clear property set to both.

The clear property clears out floating so it doesn’t get moved around weird by floating objects that come above the element. The clear property can take one of four values: left, right, both, none. The left and right values clear just left or right floats respectively. In our case, we want both, which will clear left and right. None clears none and is the default value.

So, we would simply add:

#footer { clear: both; }

And our basic layout is complete.

Practice, Practice, Practice

Floating elements properly and efficiently is a difficult talent to develop. However, we’ve laid out the ground rules in this lesson, so all that’s left is to practice. Try setting up a layout and try to figure out how to group the elements and then float and clear the proper elements.

If you have any questions or trouble, you can always ask for help here, or contact us directly. We’d love to lend a hand.

In this lesson we went over the basics of floating elements to create our layout. In the next lesson, we’ll learn how to layout the same layout using absolute positioning. After that, we’ll compare the two methods and discuss some of their weaknesses and strengths: Lesson 4.2: Layouts – Absolute Positioning