TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Learn CSS Layout

369 pointsby ScottyEabout 11 years ago

16 comments

asbabout 11 years ago
I&#x27;ve also found The Magic of CSS useful: <a href="http://adamschwartz.co/magic-of-css/" rel="nofollow">http:&#x2F;&#x2F;adamschwartz.co&#x2F;magic-of-css&#x2F;</a>
alanfalconabout 11 years ago
I&#x27;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&#x27;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.
评论 #7579690 未加载
olegkikinabout 11 years ago
You need to explain what things do.<p>This page, for instance, doesn&#x27;t explain what flexbox does.<p><a href="http://learnlayout.com/flexbox.html" rel="nofollow">http:&#x2F;&#x2F;learnlayout.com&#x2F;flexbox.html</a>
rafeedabout 11 years ago
Well done. Everything is accurately explained using simple terminology. I&#x27;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.
subirabout 11 years ago
This was on HN some time last week: <a href="https://news.ycombinator.com/item?id=7521180" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=7521180</a><p>Good site, though.
评论 #7577846 未加载
nebulous1about 11 years ago
Page 2: &quot;it wouldn&#x27;t make sense to make an inline div&quot;<p>Page 15: makes inline divs.<p>:)
评论 #7578452 未加载
MCarusiabout 11 years ago
I don&#x27;t know where I&#x27;d be without <a href="http://css-tricks.com/" rel="nofollow">http:&#x2F;&#x2F;css-tricks.com&#x2F;</a> - great site and super helpful forums.
Ellipsis753about 11 years ago
This is a great tutorial and helps me a lot by just reminding me of things.<p>There&#x27;s a mistake at <a href="http://learnlayout.com/float-layout.html" rel="nofollow">http:&#x2F;&#x2F;learnlayout.com&#x2F;float-layout.html</a> though were they talk about clearfix and how they are using it without actually using it on that page. I just thought I&#x27;d say that here in case the author reads it.
prohorabout 11 years ago
I wish I had this when I was figuring out how it all works. I&#x27;ll definitely point it friends who start with CSS.
geekamabout 11 years ago
I really like CSS Mastery: Advanced Web Standards Solutions by Collison, Budd, Moll.
评论 #7578310 未加载
rduchnikabout 11 years ago
For the clearfix can&#x27;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.
评论 #7577876 未加载
评论 #7577849 未加载
electrotypeabout 11 years ago
<a href="http://www.reddit.com/r/ProgrammerHumor/comments/22xb60/i_hate_css/" rel="nofollow">http:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;ProgrammerHumor&#x2F;comments&#x2F;22xb60&#x2F;i_ha...</a>
Rzorabout 11 years ago
If anyone wants a complete view of the picture, there is htmldog[1], which covers CSS, HTML and JS.<p>[1] - <a href="http://htmldog.com/guides/" rel="nofollow">http:&#x2F;&#x2F;htmldog.com&#x2F;guides&#x2F;</a>
owenversteegabout 11 years ago
This site is great for teaching CSS layout skills. Next time someone asks me, I&#x27;ll refer them here.<p>I especially like how it references caniuse for each property it discusses. Nice work!
guh_meabout 11 years ago
Really cool, another quality resource to help kill W3Schools.
评论 #7580047 未加载
mfeldheimabout 11 years ago
Awesome work, thanks for sharing that link ♥