Don’t Block the Float

Kyle Crouse — Mon, 28 Apr 2008 17:07:55 -0500

Here's a CSS tip to get started while I work on a larger piece about a GE.com feature. This was recently asked of me by a friend and may not be common knowledge.

When an element has a float property applied to it with a value of left or right, it automatically becomes a block-level element. I often see the following code:

display:block; float: left;

The display rule in this case is redundant, as the block is implied through the float. Save a few bytes and remove this unnecessary line from your stylesheet.

For those not-so-savvy with IE6 bugs, using the above rule when combined with a margin applied to the same direction as the float, like so:

display:block; float:left; margin-left:10px;

...will double the size of the margin you have specified, giving us 20px in this example. The same would happen if we floated the element to the right and used right margin.

As I mentioned before the display:block is redundant and doesn't have anything to do with the IE6 bug, but if we change display:block to display:inline, IE will magically not render the doubled margin and go back to normal.

Under the Hood of GE.com

Kyle Crouse — Mon, 28 Apr 2008 14:08:39 -0500

Welcome to The Gnome and the Window Seat, a new frogBlog chronicling our adventures developing GE.com. As a lead front-end developer for GE.com at frog, I worked intimately with the outline and creation of the HTML, CSS and JavaScript of the site. Through this blog I'll provide you with a behind-the-scenes look at coding techniques for producing an accessible, valid site that is easily maintained by the GE team. As new problems arise, I'll attempt to live-blog the development process with details and examples to assist you when you encounter similar problems within your own sites.

Here goes nothing...

the gnome and the window seat / frogblog

Don’t Block the Float

Under the Hood of GE.com