Skip to Site Navigation | Skip to Content

Blog

Learn about CSS positioning

Tim's recent post, Learn about CSS specificity, is a great read for those of you who have done some basic CSS but want to explore some of the more advanced techniques. That article made me think of another area that can be difficult to master but is an essential skill for the really advanced layouts: positioning.

The goal for any CSS purist is the perfect separation of form (design, style, graphics, presentation) and content (typically your document's marked-up copy and images). Most people start by working with fonts and colors in CSS, but the real challenge comes in using CSS for layout. That's where positioning comes in. Knowing how best to position your content to create an attractive and practical layout using only CSS is tough to do but really takes your website design to the next level.

One of the best and most concise explanations of CSS positioning is this handy presentation, Learn CSS Positioning in Ten Steps. Sadly, I had learned CSS before this was around, but I think it's a great refresher for any designer and will be especially helpful to those of you up-and-coming CSS masters.

Posted on Fri, August 3, 2007 by Jason Zimdars filed under

4 comments (Add your own)

1. Darren wrote:
That's a great resource but in my opinion there is no substitute to doing it yourself. I learned CSS through a book CSS Mastery by Andy Budd . It helped me tons but to learn it you have to do it.

Fri, August 3, 2007 @ 3:47 AM

2. Harper M wrote:
Thanks for the tip, I'm always looking for resources like that! Keep up the great work.

Fri, August 3, 2007 @ 8:22 AM

3. Dennison Uy - Graphic Designer wrote:
Very handy indeed. Good find!

Fri, August 3, 2007 @ 9:33 AM

4. Michael Dick wrote:
Yep, I started CSS using fonts and colors until I was introduced to standards. I remember my first days, the positioning was a pain, the ten steps would have been a good reference.

Sat, August 4, 2007 @ 5:32 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.