CSS Floats Explained

CSS floats are quite well covered all over the place, but finding all the information in one place can sometimes be tricky. It took me quite a while to understand how floats work when I started out. And once I started using them that opened a whole new can of worms. In this post I am going to show you how I use floats everywhere. It seems to work quite well :) .

Lets start out with some simple HTML. You want to position two divs next to each other.

<div class="main_content">
  <h2>Hello</h2>
  <p>Welcome to my website</p>
  <img src="/2011/11/img/me.jpg" alt="A picture of me" />
</div>

<div class="sidebar">
  <ul class="main_menu">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Ok, we have a very simple HTML snippet. We have two container divs that hold the main content and the sidebar. The main content contains a title, paragraph and an image the sidebar contains the main menu.

To float them together you would create some CSS like this:

.main_content,
.sidebar {
  float: left;
}

.main_content {
  width: 600px
}

.sidebar {
  width: 200px;
}

That isn’t very complicated either. If you ran that code you would see the two divs floated nicely next to each other. But what happens if you want to wrap our current code in another div with a background colour?

<div id="container">
  <div class="main_content">
    ...
  </div>

  <div class="sidebar">
    ...
  </div>
</div>
#container {
  width: 800px;
  padding: 20px;
  background: #333;
}
  ...

That’s cool, the only trouble is that your container is not going to wrap around the the two floated divs, so it will just be a red stripe at the top. Why does this happen? Because the divs are floating. Don’t worry there are ways to fix this. I am going to show you two:

#container {
  width: 800px;
  padding: 20px;
  background: #333;
  overflow: hidden;
}

Setting the overflow to hidden with will make the container div wrap around the floating divs. I have no idea why it does this, but it works :D . The other way is to create a CSS clear class.

.clear {
  height: 0;
  clear: both;
  overflow: hidden;
}

You can then use it like this:

<div id="container">
  <div class="main_content">
    ...
  </div>

  <div class="sidebar">
    ...
  </div>
  <div class="clear"></div>
</div>

Leaving empty divs lying around is neither pretty nor possible sometimes. If you are using a content manage like Drupal or WordPress they put together HTML for you and sometimes it is not possible to alter that.

I like using the first way, where you just set the overflow on the container to hidden, that works for probably 90% of all floating. For the other 10% create a clear class and use that.

The Awesomeness of PHP __autoload

Many of you have probably written or at least tried to write a PHP framework at some point during your career. The best way to write a frameworks, in my very humble opinion, is to use object oriented programming (OOP) and a sort of model/view/controller (MVC) architecture. In most cases this means that by the end of writing a sort of usable system you will have a large amount of files filled with different bits of code.

In the bad old days before PHP 5 you would have an index.php file and that looked something like this:

<?php
/**
 * Index file of Xframework.
 */

// Include all sorts of useful stuff...
include_once '/2011/11/bootstrap.html';
include_once '/app/model/x.class.html';
include_once '/app/model/theme.class.html';
include_once '/app/controller/user.class.html';
include_once '/app/view/index.html';

// Now we can finally do something.
$x = new x();
$x->run();

Wouldn’t it be really nice if we could just write the code without having to worry about including millions of files everywhere, which can become a pain in terms of maintainability.

Enter __autoload() in PHP5. YAY! All our troubles magically disappear. Well not really, but your life is made slightly easier. So instead of the above, you now have:

<?php
/**
 * Improved index file of Xframework.
 */

// Our pretty __autoload() function.
function __autoload($classname) {
  include_once '/app/classes/'. $classname .'/2011/11/.html';
}

// Run the framework.
$x = new x_controller();
$x->run();

Using __autoload should theoretically also improve the speed at which your app loads because you only load the files that are needed at the time.

You could also do some really complex configurations like the below for example:

<?php
/**
 * A more complex __autoload example for Xframework.
 */

// Autoload some classes.
function __autoload($classname) {
  $class = explode('_'. $classname);

  $class_file = $class[0] .'/2011/11/.html';
  $class_type = $class[1];

  // Include the class.
  include_once '/app/'. $class_type .'/index.html'. #class_file;
}

// Let's run the app.
$x = new x_controller();
$x->run();

In the example above the autoload function is checking the class name for a type. The type could be, for example, model, view, controller, elephant or whatever you wanted it to be. That type is the directory where the class is stored. In the example we called the x_controller class. So that class would be located at /app/controller/x.php, the same would be true if you wanted it to be x_model or x_view.

This most definitely makes my life easier when I write PHP applications. If you spend a lot of time writing PHP applications and don’t use a specific framework for the job I would suggest that you put together a rough toolkit for yourself using __autoload() as the heart.