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.
Interesting to know, cheers Chris.
neat, though I have to say I was a little disappointed to find that there wasn’t any LOLCSS sites to be found… :(
I also immediately Google’d LOLCSS, and was similarly disappointed.
Nice tip though!
Tomorrow… from the same guys who brought you wtfjs.com, probably. hehe
and better still… the domain is still available for purchase.
I give it a couple days, at most, from the time of this post before its up…
(and shortly thereafter nested neatly in my reader)
Just checked the domain and Chris already registered it :-)
http://who.godaddy.com/WhoIs.aspx?domain=lolcss.com
Aw snap, there I go again.
I had briefly considered buying it… even had it sitting in my cart. But honestly just don’t have the time to do anything with it…
Glad someone who will put it to good use grabbed it… save us from the leekspins of the web
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.
Nice quick tip! Keep ’em commin’ Chris!
Nice, thanks for sharing this
We want more LOLCSS pictures! :)
(yeah, I googled it too and was disappointed as well)
And you didn’t know this before?
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Well your mom didn’t know, so I figured I’d post it here to keep her up to speed.
I kid.
But really, I’ll post tips here of any level, so long as I happen to think it’s interesting.
maybe his mom DID know?!
http://xkcd.com/341/
The only thing better than the tip (thx btw) was skimming down to read this jabrone getting smashed. hristo – write your mom and apologize…
Great tip – thanks.
Great thing to know Chris , thanks again!
Wow – great tip. I’ve grown very fond of the way the inspector in Chrome shows the computed styles including browser spec/defaults.
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.
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.
Yup, have been using that for a while. Silly IE6 always needed random fixes.
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.
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
Chris, Keep ‘em commin’! Nice quick tip!
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.
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.
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.
@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.