
Learn CSS Layout - ScottyE
http://learnlayout.com/
======
asb
I've also found The Magic of CSS useful: [http://adamschwartz.co/magic-of-
css/](http://adamschwartz.co/magic-of-css/)

------
alanfalcon
I'd like to give a big sloppy wet kiss (or just a high five) to ScottyE for
linking this. I always felt like I walked in halfway through the CSS story and
like I just needed to play catchup through trial and error because try as I
have, I've failed to find a resource as clear as this. In short, as a designer
who never really learned CSS properly before today, this is a godsend. Thanks.

~~~
ScottyE
I felt exactly the same way upon finding the site and so had to share!

------
olegkikin
You need to explain what things do.

This page, for instance, doesn't explain what flexbox does.

[http://learnlayout.com/flexbox.html](http://learnlayout.com/flexbox.html)

------
rafeed
Well done. Everything is accurately explained using simple terminology. I'd
love to see this expand beyond just layouts. CSS is overwhelming to beginners,
but this is dead simple while still delving into deeper, more complex topics.

------
subir
This was on HN some time last week:
[https://news.ycombinator.com/item?id=7521180](https://news.ycombinator.com/item?id=7521180)

Good site, though.

~~~
ScottyE
I'll note that a search of '"learnlayout.com" site:news.ycombinator.com' on
Google doesn't bring up any other threads, but searching through the footer of
the HN site does.

------
nebulous1
Page 2: "it wouldn't make sense to make an inline div"

Page 15: makes inline divs.

:)

~~~
roryokane
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.

------
MCarusi
I don't know where I'd be without [http://css-tricks.com/](http://css-
tricks.com/) \- great site and super helpful forums.

------
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](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.

------
prohor
I wish I had this when I was figuring out how it all works. I'll definitely
point it friends who start with CSS.

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

~~~
atom-morgan
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.

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

------
rduchnik
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.

~~~
jakebellacera
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](http://reference.sitepoint.com/css/haslayout)

------
electrotype
[http://www.reddit.com/r/ProgrammerHumor/comments/22xb60/i_ha...](http://www.reddit.com/r/ProgrammerHumor/comments/22xb60/i_hate_css/)

------
Rzor
If anyone wants a complete view of the picture, there is htmldog[1], which
covers CSS, HTML and JS.

[1] - [http://htmldog.com/guides/](http://htmldog.com/guides/)

------
owenversteeg
This site is great for teaching CSS layout skills. Next time someone asks me,
I'll refer them here.

I especially like how it references caniuse for each property it discusses.
Nice work!

------
guh_me
Really cool, another quality resource to help kill W3Schools.

~~~
sopooneo
I ask in earnest: why do so many people dislike W3Schools so much? It always
seemed pretty helpful to me.

~~~
michaelbuddy
well turns out - [http://www.w3fools.com/](http://www.w3fools.com/)

------
mfeldheim
Awesome work, thanks for sharing that link ♥

