Ternstyle

This is an interesting topic for me as a web designer who is also a programmer. My mind is almost always geared toward efficiency in my work which draws me to the question which is most efficient; floating elements or making them inline and block level. I suppose these are not our only options but these are the two main methods I’ve employed when rendering my designs so these are the two I’ll write about.

Both of these methods have their flaws and quirks which present themselves uniquely in different browsers. Aside from efficiency we’ll also have to take into consideration browser compatibility. These are the two standpoints from which I’ll explore the two very contrasting methodologies.

The Float

The first thing we should know about floating elements is why this method was invented in the first place. The original concept of the float was for text-wrapping. The idea was to take a block level element, such as an image, and set it to justify to the left or right respectively while allowing text to wrap around it. Its application, although very effective as a means for rendering an entire document of elements, is a bastardization of its original intention. You say, “Who cares?” Well, as a result of the aforementioned bastardization there are precautions that must be taken to make sure that a page is rendered properly visually when using floats this way.

The main issue presented by floating elements is that a floated element is not automatically recognized by its containing parent element. In my opinion this was a flaw in its application from the get-go. Regardless as to the element being floated its parent element’s size should change accordingly to accommodate the floated element. It does not (without some trickery).

The second and daunting issue with floats is that you can’t center floated items. So if you have a list where you’d like the items centered in your document and you’ve floated the list’s items you’d need to set a width to the list to be able to center it properly. This means no more purely dynamic list. Whenever you add or subtract an item you’ll need to update the width of the list to make sure it stays centered. For this I don’t like floats for anything centered.

Notice below that the parent element with a 3 pixel border does not properly resize to envelope its child which is 200 pixel in height.

The float everything method

This method is fairly self explanatory. For some reason a  floated parent recognizes the size of its children who are also floated. I find this to be a weak option but one I employed myself for quite some time. Look back at some of my old sites and have a giggle. This method requires making sure most of your elements are floated which means a lot more CSS. I recommend against this method. One of its main issues is the addition of plugins or add-ons which use their own CSS or the minute styling details you’ll need to delve into when adding things inline with content. And don’t get me started on how fun this becomes when your talking about forms and form elements and how poorly they’ll begin to play with others. Move on from this method.

The clear fix

The “clear fix” is probably the most widely used solution to the float issue and is being employed in the above example to ensure that this text does not sit directly under the seemingly empty parent container. CSS has a command entitled “clear”. The clear command when applied to an element forces that element to be rendered under floated elements which float matching the associated value. The above example uses the command “clear:left;”. This command will make the element it is applied to clear any element rendered in its path that is floated to the left. Other values include “right”,”none” and “both”.

The clear fix is clunky. You need extra html mark-up placed in your code wherever something is floated. It’s just plain inelegant but it works. The following code does the trick:

<div class="non-floated-parent">
     <div class="floated-child">
          This is a floated element which is floated to the
          left and has a parent element with a 3 pixel border.
     </div>
     <br style="clear: left;" />
</div>

The overflow method

The overflow method is the most elegant solution. It’s pure CSS. There is no need for extra mark-up. No need to alter your templates or HTML. However, you still need to add a few lines of CSS to any element which is not floated and has floated children. This method consists of adding a CSS width and overflow attribute to the containing element. Like so:

.parent {
     overflow:hidden;
     width:100%
     border:3px solid #333;
}

The child can then be set up like so:

.child {
     float:left;
     width:200px;
     height:200px;
     background:#ccc;
}

The above code will produce this:

This method requires a minimum of one CSS command be applied to each or a group of parent element(s). I like this one the best so far in terms of floating elements.

Articles to read on floats:

• http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
• http://www.quirksmode.org/css/clearing.html
• http://www.positioniseverything.net/easyclearing.html

The Inline-Block

The inline-block method is just as quirky (maybe quirkier) as the float method and requires its own work-arounds. Firstly, Internet Explorer 7.x and earlier does not care to treat an inline-block element as an inline element. It only assigns it block level status. This means that just like a block level element inline-blocks are rendered on their own lines regardless as to the space they consume on the horizontal plain. This requires you to use conditional CSS commands to reset anything set as an inline-block which needs to actually be rendered inline as simply “inline”.

Also, vertical alignment at times becomes an issue with inline-blocks. So you’ll need to account for this by using the CSS command “vertical-align”. Lastly and probably the most daunting issue with inline-blocks is that when they align themselves they recognize whitespace such as a carriage return or a tab character in the actual html mark-up as an inline element and depending on your font-size (because yes your font-sizes are applied to whitespace) you’ll see space between things like list elements which you’re attempting to render on one line butted up against each other. There are solutions for all of these things.

Here is a menu styled using the inline block method:

Notice that if you’re using IE 7 or earlier the list items are rendered on their own lines. If you’re not using IE7 or earlier but wish to see what it would look like, it looks like this:

• List Item 1
• List Item 2
• List Item 3

The IE 7.x and earlier issue

The way I resolve this is with conditional stylesheets. You can read about that here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/.

More often than not I am using the float or inline-block element for either my columns or my navigational lists. Here is the code I would use for my lists for all non-IE7 and earlier browsers:

ul, li { display:inline-block;margin:0;padding:0;list-style:none; }

This will set up your lists nicely for you to style them individually throughout your pages. Here is what the CSS should look like in your conditional style-sheet:

ul, li { display:inline; }

Thats all you need to fix the IE 7.x and earlier issue. I use conditional stylesheets anyway because I prefer to use CSS for my png’s over javascript.

The Vertical Alignment Issue

Take a look at this menu with mixed heights:

• List Item 1
• List Item 2
• List Item 3

Notice that the vertical plane the items are rendered in is set by the text inside the list items. The text is rendered inline with all the other text. This is an issue when setting up columns in a document as inline-blocks. You can float three divs next to each other and they’ll be rendered with the very tops of themselves as high as they’re able to go. This is not so with inline-blocks. With inline-blocks the text is respected more so than the containing element.

To fix this I use this code:

ul, li { vertical-align:top; }

Or so that I don’t need to set this multiple times for all elements which require it I’ll use this command which set everything to be aligned this way:

* { vertical-align:top; }

This code will make the above menu look like this:

• List Item 1
• List Item 2
• List Item 3

You like? Well we still have the pesky space between the items to deal with.

The Spacing Issue

This one is no fun at all and may make you abandon the inline-block method and stick to the float method. I’m okay with that. Do what you’re comfortable with.

Okay, let’s remember that the issue at hand is the recognition of the whitespace characters like carriage returns and tabs in your actual mark-up between your elements you’re attempting to block together. The first thing you could do is simply remove the whitespace.

Our menu to be easily readable and editable looks like this:

<ul>
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li>List Item 3</li>
</ul>

To alleviate this issue right away we can write the code like this:

<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>

See below for what happens when you remove the whitespace:

• List Item 1
• List Item 2
• List Item 3

Nice! With one major exception. We can’t always do this. If you’re using a content management system or any code that renders certain aspects of your HTML for you you may not be able to effectively remove all that whitespace. Now what?

Well, remember your browser sees that whitespace as text so it is assigning a font-size to it. Let’s see what happens when we set the ul’s font-size to zero:

• List Item 1
• List Item 2
• List Item 3

That works great! Except now we are unable to see the text inside the list items. So If we want to set the font-size to zero we need to do this to the parent element (the ul) and then reset the text of the list items back to what we want them to be. That’s a lot more CSS if we weren’t already specifying the font-size for the list items or any links they may parent. This method, although effective, sucks! If you’re using inline-blocks though it may become necessary.

There are some other tactics to circumvent the spacing issue like setting negative margins. The best way is to remove the whitespace. If you can’t do that it’ll take a few font-size command to set you straight.

Articles to read on Inline-Blocks

• http://www.quirksmode.org/css/display.html
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/

Float vs. Inline-block Chart

In Summary

Each method has its own symptoms and repercussions. There are solutions to all the problems that both of these methods produce. Some of the solutions are actual solutions and others are work arounds. It seems to make the most sense to not adhere strongly to one method and use them in situations that call for them. How do you know which situation calls for which method? Use the one where you can employ actual pure CSS solutions instead of work arounds. Don’t lose the dynamics of your pages by having to update the CSS every time you need to make a change.

For instance, I’ll use floats for images (their original intention) and when dealing with areas of pages with fixed heights. A fixed height means no need for a clear fix. I’ll use inline-blocks for template columns. Columns are a part of the template that aren’t usually dynamically driven so it’s easy to remove whitespace between the column elements. For menus and navigation inline-blocks work great for vertically aligned lists and with the vertical-align and font-size fixes are great for horizontal menus that are center aligned. Usually horizontal navigation has a fixed height so floats are okay. However, and a big however, if you’re dynamically generating your horizontal menus and floating the items right they’ll be rendered in reverse order. In which case, I’ll usually use inline-blocks for right justified horizontal navigation or really any navigation where I don’t care if there is a little space between the elements.

First and foremost, write efficient compact code in whatever way makes you happy, comfortable or suits your compulsions. I know I do. Happy codings.