back | parent

Inline-Block, Not Float

I had some really good teachers when I was learning CSS, most notably SnackMachine[B] and akanik, both of whom basically taught me everything I know about HTML and CSS. But as many of us will, I also looked around at random websites for lessons and tips, and sometimes, I'm afraid, those lessons are poorly structured.

To wit, when people (and by "people", I mean me) are learning CSS, they often get very confused about how to get certain elements to move left or right on the page. Then they learn about float, which usually solves their problems...at first. The problem with float is that it gets over-used and people don't understand what it is doing, so they use it for one of its effects and then once they start doing more "serious" web coding, all of its other inherent attributes screw them over.

The float attribute, by design, removes an element from the natural flow of your CSS, meaning that all the logic you have learned about CSS and all the techniques and tricks you have developed to manipulate the positioning of your elements are rendered utterly useless. Nothing works any more; you try to use the width of a div so you can center something, but the float'd element isn't in that div any more, so it can't constrain itself to the div's width. Or you try to move other elements around the float but the float moves around in funny ways, because it's not in the flow of the CSS. That's what float does: it removes its element out of CSS and makes it a free-floating radical.

Sometimes you do want that affect, but often times we only use float because it's what we first learned, and it does appear to get the job done. But in fact, many of us use float when inline-block would have been much more appropriate.

display: inline-block;

In case you were not aware, CSS sees some code elements as "blocks" items, and block items always get a new line. In other words, if you had a bunch of <p> tags in a document, you would expect CSS to place each paragraph at the beginning of a new line, yes? Well, that's what it would do. And it will also do that for div tags and h1 tags, lists and list elements like li and ol and ul, tables, and probably a few others. Point is, when you use a block element, they inherently get placed on their own new line. This is why it feels so difficult to achieve two columns on a website layout; you want to use a div but you cannot get two div's to co-exist on the same line. So you float one, right? Wrong, and here's why.

Take a look at this simple webpage. It consists of two div's, each one given a different colour.

<!DOCTYPE html>
 <html lang="en">
  <head><title>Inline Exercise</title>
   <style>
   #body {background-color: #000; color: cyan;}

   #red {
   background-color: red;
   }

   #blue {
   background-color: blue;
   }
   </style>
  </head>
 <body>
 <div id="red">
  Hi some text.
 </div>
 <div id="blue">
  Second div.
 </div>
</body>
</html>

Sure enough, each div gets its own line, and is 100% wide, whether we intended it or not:

Hi some text.
Second div.

How to make them sit side by side? Well, if you want them on the same line, you must convert these block elements to inline-block elements. They'll still be boxes like we generally think of div's being, but they will be boxes that are able to sit side by side. Well actually that's not entirely true yet; this step will appear to not work, but bear with me.

<!DOCTYPE html>
 <html lang="en">
  <head><title>Inline Exercise</title>
   <style>
   #body {background-color: #000; color: cyan;}

   #red {
   background-color: red;
   display: inline-block;
   }

   #blue {
   background-color: blue;
   display: inline-block;
   }
   </style>
  </head>
 <body>
 <div id="red">
  Hi some text.
 </div>
 <div id="blue">
  Second div.
 </div>
</body>
</html>

Which renders this:

Hi some text.
Second div.

Why has nothing changed? Well, since they are boxes that we want to sit side by side, we probably also want them to be less than 100% or else they won't fit on the page (because the page itself is only 100%, so how could two things, each measuring 100%, possibly fit side by side?), so we'll make them 45% wide. Watch.

<!DOCTYPE html>
 <html lang="en">
  <head><title>Inline Exercise</title>
   <style>
   #body {background-color: #000; color: cyan;}

   #red {
   background-color: red;
   width: 45%;
   display: inline-block;
   }

   #blue {
   background-color: blue;
   width: 45%;
   display: inline-block;
   }
   </style>
  </head>
 <body>
 <div id="red">
  Hi some text.
 </div>
 <div id="blue">
  Second div.
 </div>
</body>
</html>

And sure enough, we now have div's that sit nicely side by side:

Hi some text.
Second div.

Obviously we could then manipulate margins and padding and other things that will position the div's where we want them to go. And best of all, the div's will obey, because they are still bound by the laws of CSS, rather than left floating about with no point of reference as to what everything else around them are doing.

Bottom Line: Before you think of using float, consider display : inline-block;

[EOF]