Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS Layout

learnlayout.com

Post reply on HN
Print view View original

11–20 of 27 posts

Re: Learn CSS Layout

#11

Post by PavlovsCat »

rduchnik wrote: post #9

For the clearfix can't you just use `clear:right` or `clear:both`? Also for inline-block you can also use the ie7 hack `display: inline-block;*display: inline;zoom: 1;`. Nice tutorial though.

> For the clearfix can't you just use `clear:right` or `clear:both`?

Not if you use it on the container itself, since it would apply to the interaction with floated elements that come before the one you use clear on - but here you open the container tag first, and then come the floats.

You could use clear on an element that comes after the floated elements, but before the container is closed, though. (you can also use the ::after pseudo element for this, maybe even in combination with ::last-child or something)

Re: Learn CSS Layout

#12

Post by jakebellacera »

rduchnik wrote: post #9

For the clearfix can't you just use `clear:right` or `clear:both`? Also for inline-block you can also use the ie7 hack `display: inline-block;*display: inline;zoom: 1;`. Nice tutorial though.

This comment is tangential on purpose, but if anyone is curious as to _why_ we use the `display: inline-block; *display: inline; zoom: 1` "hack" to support IE7, then I will gladly explain it to you.

First, CSS is cascading, meaning a rule following another rule will override it. Second, attributes with an asterisk prepended to the property name are only picked up by IE7. Finally, in a nutshell, IE7 treats layout differently than other browsers. On IE7, certain elements get layout by default, but other elements can be "given" layout by using certain properties (that we refer to as "hacks") like `zoom: 1`. When an element has layout in IE7, it can be given a display of inline and act like inline-block. This is one of the many reasons why older versions of IE were such headaches for web designers. More info about IE7's hasLayout quirk can be found here[1].

If we apply what is described above into these rules, we get this:

1. display: inline-block is applied to the element.

2. on IE7, display: inline is added to the element.

3. on IE7, zoom: 1 gives the element layout, thus making it act like it act like an inline-block. Other browsers attempt to "zoom" the element, but since it's at "1", this is like saying "zoom the element 1x the size," so it does nothing.

I hope that helps clear up why we use this hack.

[1]: http://reference.sitepoint.com/css/haslayout

Re: Learn CSS Layout

#14

Post by Ellipsis753 »

This is a great tutorial and helps me a lot by just reminding me of things.

There's a mistake at http://learnlayout.com/float-layout.html though were they talk about clearfix and how they are using it without actually using it on that page. I just thought I'd say that here in case the author reads it.

Re: Learn CSS Layout

#17

Post by atom-morgan »

geekam wrote: post #16

I really like CSS Mastery: Advanced Web Standards Solutions by Collison, Budd, Moll.

I just finished this book a few days ago. While some content is a bit outdated, it's by far the best CSS material I've ever read and helped clarify a lot of concepts for me.

Re: Learn CSS Layout

#18

Post by roryokane »

nebulous1 wrote: post #15

Page 2: "it wouldn't make sense to make an inline div" Page 15: makes inline divs. :)

Page 15 doesn’t make inline divs, it makes inline-block divs. That makes all the difference. I think since the inside of the div is displayed like a block, a div is more appropriate than a span. It would be weird to have a span with block insides, even if it’s inline in its context.

Re: Learn CSS Layout

#20

Post by geekam »

atom-morgan wrote: post #17
geekam wrote: post #16

I really like CSS Mastery: Advanced Web Standards Solutions by Collison, Budd, Moll.

I just finished this book a few days ago. While some content is a bit outdated, it's by far the best CSS material I've ever read and helped clarify a lot of concepts for me.

I agree about it being slightly dated but it presents everything in a very clear manner. CSS otherwise is just hard to do right.
Post reply on HN