Grow your CSS skills. Land your dream job.

Implied Block

Published by Chris Coyier

Jeff Starr tweeted a simple tip the other day:

If you're floating an inline element, it's treated as block, so no need to include "display: block;" in your stylesheet.

Indeed that is exactly what happens. The spec:

The values of this property have the following meanings. Left: The element generates a block box...[actual stuff about how floats work]

Browsers implement it just that way. Here's a LOLCSS screenshot to make things clear:

What this does mean is that you can use width and height properties and the element will respect them. What it doesn't mean is that the element will automatically stretch to the width of its parent as non-floated block elements do. Its width and height will be either what you set it as, or if you don't set it, stretch to fit whatever content you put inside it.

It works this exact same way for absolutely positioned elements.

Comments

  1. John
    Permalink to comment#

    Interesting to know, cheers Chris.

  2. Permalink to comment#

    neat, though I have to say I was a little disappointed to find that there wasn’t any LOLCSS sites to be found… :(

  3. Umm learnt something new today. Didnt know that it auto makes the element a block when floating. I’ve always declaired it as a block if I want to make it act like one.

    Whats common though is that if I float a block element I find myself setting it to an inline element to stop the IE6 double margin bug.

  4. Nice quick tip! Keep ‘em commin’ Chris!

  5. Permalink to comment#

    Nice, thanks for sharing this

  6. Permalink to comment#

    We want more LOLCSS pictures! :)

    (yeah, I googled it too and was disappointed as well)

  7. Permalink to comment#

    And you didn’t know this before?

    http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

  8. Permalink to comment#

    Great tip – thanks.

  9. Sam
    Permalink to comment#

    Great thing to know Chris , thanks again!

  10. Permalink to comment#

    Wow – great tip. I’ve grown very fond of the way the inspector in Chrome shows the computed styles including browser spec/defaults.

  11. Permalink to comment#

    I lol’d.

    I would love to see a joke article about LOLCODE. There is a PHP parser available, so you could actually write a simple web app with it. lulz.

  12. Better yet, there’s a hack opportunity here for a classic IE6. When floating an element left and putting left margin on it (or floating right with right margin), IE6 would erroneously double that margin. The easiest workaround was to float the element but set its display to inline. Because it was float, the “display: inline” would be overruled, but the margin bug would be fixed in the process.

  13. Michał Czernow
    Permalink to comment#

    There is another useful feature of this behavior. Floats in default adjust to their content. So you can actually have block elements, which behave like inline elements.

  14. Permalink to comment#

    Nice tip about the inline element. Thanks.
    Bro, I like to see some workouts on HSL propertiy in css3.if you kindly put some examples on it,it will be great.

    Thanks

  15. Permalink to comment#

    Chris, Keep ‘em commin’! Nice quick tip!

  16. peter
    Permalink to comment#

    uhm, duh… I didn’t expect this kind of very, very basic information on css-tricks.com

    Also:
    What you DO have to include is display:inline because of the IE float-double margin bug … at least, if you apply margins on your floated elements.

  17. John
    Permalink to comment#

    You should *always* give floated elements widths:

    http://www.w3.org/TR/CSS2/visuren.html#floats

    It’s a pain, but there it is. Not doing so can cause real issues in certain browsers.

    • Permalink to comment#

      So every image that you float should be given its own class to set a width to? You and I both know that would be very silly. Divs are a different beast.

      Chris hit the nail on the head below.

  18. Chris
    Permalink to comment#

    @John, did you bother reading the spec you linked to? Floats were required to have a width in CSS2, but that was changed in 2.1 as can be seen in your link and in section 10.3.5 of the same spec:

    If ‘width’ is computed as ‘auto’(default), the used value is the “shrink-to-fit” width.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".