Float left. Float right. What to do and why? Well read on …

How to float it

Well – it can sometimes be quite difficult to understand how the float universe works. I will try to give some basic pointers and examples on the float left and float right technique and how it reacts in the layout.

The basic of id and classes

There are two ways to access HTML elements from CSS. You can either use id’s or class’es. Almost every HTML tag, if not all, allows the assignment of an id or class name. When element has an id or class, it can be accessed from CSS by using . or #.

ID are accessed with # (hash). Lets say we have a <div>-tag with the id set to mydiv:

<div id="mydiv">some content here</div>

The mydiv can then be access like this from CSS

#mydiv {
  width: 100px;
  height: 100px;
}

If we are using a class instead of an id, the code would lookup like this:

<div class="mydiv">some content here</div>

And

.mydiv {
  width: 100px;
  height: 100px;
}

id’s and class’es will not be covered in more details here.

Starting point

This article will use the following HTML as a starting point. It holds a simple div-”container” with contains another 3 divs.

<div class="container">
  <div class="class1">This is the first class</div>
  <div class="class2">This is the second class</div>
  <div class="class3">This is the third class</div>
</div>

Without any CSS it would look like this:

Not really that pretty and nice as we would like it to be, right?

Basic styling

Lets do some basic styling of the above code, to better see what’s going on.

.class1 {
  width: 200px;
  background-color: light-grey;
}
.class2 {
  width: 300px;
  background-color: white;
}
.class3 {
  width: 500px;
  background-color: grey;
}

This outputs:

Okay – now we can better see the difference between the 3 divs.

Lets float it

When floating left, the selected element will be placed along the left side of the next element.
When floating right, the selected element will be placed along the right side of the next element.

Left floating the first class:

.class1 {
  width: 200px;
  background-color: light-grey;
  float: left;
}

Okay, that went kinda like expected. Although – the class2 has a width set to 300px, so why does it wrap like that, when it should have enough space – the class1 is 200px and the class3 is 500px, so class1 and class2 should will up the exact same space as class3 below.

This is one of those questions I used to ask a friend of mine over at spiced2.com and he always answered “when in doubt, float left”. Ok then. Lets float class2 left as well:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 300px;
          background-color: #006699;
          float: left;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Now it’s a lot better, but what will happen if we try to float right?

The first class is now floating right, and is therefor aligned to the right side of class2:

.class1 {
          width: 200px;
          background-color: #DEDEDE;
          float: right;
}
.class2 {
          width: 300px;
          background-color: #006699;
}
class3 {
          width: 500px;
          background-color: #009900;
}

The next step

Lets try a bit more advanced setup, where we will wrap some text around another element. To do this we have to place one element inside another like this:

<div class="container">
  <div class="class1"> <span class="class2">This is the second class</span>This is the first class This is the first class This is the first class This is the first class This is the first class This is the first class </div>
  <div class="class3">This is the third class</div>
</div>

To get the text in class wrapped around the class2 element, we have to set a float right on the class2. This makes it right aligned, and the text in class1 will then wrapped around it.

The CSS looks as follows:

.class1 {
          width: 500px;
          background-color: #DEDEDE;
          float: left;
}
.class2 {
          width: 200px;
          background-color: #006699;
          float: right;
}
.class3 {
          width: 500px;
          background-color: #009900;
}

Last words

That it. A very small and basic intro tutorial on the mysterious left and right floating. Enjoy.