

Learn CSS Positioning - r11t
http://www.barelyfitz.com/screencast/html-training/css/positioning/

======
unignorant
Important to know, I suppose...

But if you are building a quick app or prototype, I've found frameworks like
blueprint (<http://www.blueprintcss.org/>) to be quite helpful.

~~~
nbrochu
I fail to see the use of CSS frameworks (and yes, I have tried most of them).

Honestly, in my experience:

\- The time you invest in learning the ropes of that framework would be better
invested in properly learning CSS. I wouldn't say this of any framework in any
language, but CSS is easy and, contrarily to what I constantly hear, it isn't
that hard to master.

\- Once you know CSS well, it's much faster to convert a PSD by hand than
trying to make it work with your framework. The more detailed the actual
design, the more this applies.

\- The only pseudo-framework that actually boosts styling speed is leveraging
a well-maintained css reset stylesheet.

Keep in mind that this is coming from somebody that knows CSS well... I
understand why a framework sounds appealing, especially since we have a lot of
them on the development side, but in the case of CSS, it is total overkill.

~~~
pmjordan
I've been using CSS off-and-on pretty much since the first browsers started
supporting it; I too struggle to see the point of the frameworks I've tried.
There's only one thing I have trouble with: maintaining clean & tidy CSS once
a site grows beyond a certain point. Details get changed, which causes
classes, etc. to be forked, rules don't get deleted because it's not clear if
they're really unused, etc.

Do you have any advice for dealing with this? I feel there ought to be some
way of semi-automatically "refactoring" style sheets, or keeping them compact
and neat to begin with, but I haven't yet found it.

------
volomike
Don't forget to add a doctype. It can make the difference of night and day.

~~~
callmeed
Can you give a brief example?

~~~
lambda
If you leave off the doctype, you are put into quirks mode, in which browsers
try to emulate bugs from the Netscape 4 and IE 5 era.

The biggest difference is probably the IE 5 box model (also called
"traditional box model" or "border box"), which doesn't comply with the
standard CSS box model. In the IE 5 box model, the size of boxes includes
their borders and padding, while in the W3C box model, the size of boxes
includes only the content of the boxes (the IE 5 version actually makes more
sense, but it's not what's in the standard). In later versions of IE, the
standard box model is used, but only if you're in standards mode; the IE 5
model is used in quirks mode. Nowadays, almost all browsers support a CSS3
property, box-sizing that can control which box model to use, so you can
actually enable the traditional box model in a standard way (though it's
prefixed -moz-box-sizing or -webkit-box-sizing in Gecko and Webkit, as that's
the preferred way to implement standards that aren't yet finalized)

For more detail on the differences between quirks and standards mode, see:

<http://en.wikipedia.org/wiki/Quirks_mode>

and

<http://www.quirksmode.org/css/quirksmode.html>

------
scorxn
If you need your columns to be equal height (eg: full-height backgrounds) try
<http://www.alistapart.com/articles/holygrail/>

------
Groxx
For a quick overview / intro, this is excellent. Fast, to the point, and
clean. I wish I had this when I started.

Of course, with only 9 effective steps of a single demonstration, it's rather
lacking in completeness. But that's not its point, and I love all the links in
this thread. Loads of good stuff :)

------
verdant
I read this tutorial a long time ago for a basic app I was working on and
found it quite helpful. It was my first brush with css positioning

------
callmeed
Awesome because #4 clears up some confusion I've had lately.

------
rbrcurtis
Needs position:fixed

------
tel
Step 11 should be: If you don't have an element to clear out the bottom, you
can get limited functionality by applying

    
    
      overflow: hidden
    

to the containing element. In most cases this will cause it to extend and
prevent the inner elements from bleeding out. In some edge cases it will cause
them to be hidden, though.

~~~
treyp
it's pretty surprising how prevalent `clear: both` is. yes, it works, but
you're putting presentational code in your markup more than you need to.

let me put it in simple terms for people:

 _you probably don't need to use `clear: both`. almost all of the time, you
can use `overflow: hidden` on the parent element instead of `clear: both`._

(the exception of course is when you've got elements with negative margins
that would actually be hidden with `overflow: hidden`)

edit: relevant link - <http://www.quirksmode.org/css/clearing.html>

~~~
loup-vaillant
There is one case in which I don't know how to do away without extraneous
presentation divs: I want a 2-columns layout where the left column is written
_after_ the right column in my source code. Good for my eye (navigation on the
left) _and_ for search engines and text based browsers (relevant text first).

Right now, my div structure looks like this:

    
    
        <body>
          <header />
          <div-hackw>
            <div-hack1>
              <div-hack2> <article /> </div-hack2>
              <nav /> -- written after, displayed on the left
          <div-hackw>
          <footer />
        <body>
    

<http://www.loup-vaillant.fr/css/style.css>

<http://www.loup-vaillant.fr>

inspired from [http://matthewjamestaylor.com/blog/ultimate-2-column-left-
me...](http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm)
(down right now).

Header, footer, nav, and article are okay (they eventually will be actual
html5 tags). Hakcw, hack1 and hack2, however, are ugly. Does anyone know of a
way to ditch them ?

~~~
loup-vaillant
EDIT: I did _not_ found the ideal solution: it breaks when the middle column
isn't wide enough.

I finally found the solution (below), inspired from
[http://www.positioniseverything.net/articles/onetruelayout/a...](http://www.positioniseverything.net/articles/onetruelayout/anyorder)

This layout is source ordered (header article nav aside footer), liquid, and
the side columns have a fixed width. You can easily do the same thing with 2
columns only. The only drawback left is the fact that I can't force the
columns to share the same height. As far as compatibility is concerned, I
think an html 4.1 version will work on any relevant browser. So I think I
found my ultimate layout. At last.

    
    
      <!doctytpe html>
      <html>
        <head><link rel="stylesheet" href="test.css" /></head>
        <body>
          <header> header header header header header </header>
          <article>
    	article article article article article
            article article article article article
            article article article article article
          </article>
          <nav>    nav nav nav nav nav nav            </nav>
          <aside>  aside aside aside aside aside      </aside>
          <footer> footer footer footer footer footer </footer>
        </body>
      </html>
    
      /* html5 reset */
      article, nav, aside, header, footer { display:block; padding:1em; }
      /* colors */
      html           { background-color:#fff; }
      body           { background-color:#ddd; }
      header, footer { background-color:#aaa; }
      nav, aside     { background-color:#8aa; }
      article        { background-color:#a8a; }
      /* layout */
      body    { margin:auto; padding:2em; width:35%; }
      article { float:left; margin-left:5em; margin-right:5em; }
      nav     { float:left; width: 3em; margin-left:-100%; }
      aside   { float:left; width: 3em; margin-left:-5em;}
      footer  { clear:both; }

------
obeattie
Yay! Just what the readers of Hacker News love to read… basic CSS tutorials!
Can we have a "how to get amazing mouse cursors with JavaScript" one, too?

~~~
daleharvey
judging by the points it does look like what hacker news wants to read, but we
can always do with less snark.

This looks like the best example I have so far to pass along to people asking
me about css, which happens quite often.

That aside CSS is messy and complicated, lots of programmers dont understand
the basics, and even experienced developers can easily miss a few very useful
tips.

~~~
kowen
I think CSS itself isn't so complicated, but the whole different support in
different browsers thing certainly does make a mess of it!

One of the most helpful things I ever did with respect to CSS was read the
apress book on html/css patterns (just ignore the parts that use javascript).

<http://books.google.com/books?id=xq9IOomk1tUC>

(I never realized that standard CSS actually operates with 6 box models!)

