digg

Facebook Connect Join Digg About

Learn CSS Positioning in Ten Steps

barelyfitz.com — his tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.

Who dugg this? Made popular Mar 30, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

34 Comments

show profanity settings
expand all
  • mike_p, on 10/12/2007, -3/+13I swear if they don't properly support CSS in IE7, I'm going to... do absolutely nothing but become miserably frustrated along with thousands of other web developers. MS turns a deaf ear to us...
  • fyngyrz, on 10/12/2007, -3/+11...and let's not forget that "float" can lock up Internet Explorer, with it's execrable support of CSS.
  • patmfitz, on 10/12/2007, -0/+3...but it goes to eleven...
  • whalesalad, on 10/12/2007, -1/+4+Digg. Great tool. Easy, quick, and great for when you need a quick answer during a design. Woot!
  • btipling, on 10/12/2007, -0/+3That's really nine steps.
  • toekneebullard, on 10/12/2007, -0/+3Exactly what I needed! Thanks!
  • banglogic, on 10/12/2007, -0/+3Nice! I was working on a site (and monitoring digg) when I saw this. Reminded me of how to resolve an issue. Digg!
  • bhaugh, on 10/12/2007, -0/+2That's one method, jadedknight, but your CSS will fall to pieces if you want to move your content around within the actual HTML. There's a different approach for every instance, but that's one of the less robust ones, I'm afraid.
  • artanis, on 10/12/2007, -0/+2Examples are always better than piles of documentation! You get a big thanks from all of the visual learners out here.
  • kden, on 10/12/2007, -0/+2Nice intro to positioning. Some of my friends actually are wanting to learn some CSS. Good way to start showing them positioning.
  • pussfeller, on 10/12/2007, -0/+2This tut explained in about 5 minutes what hours of browsing other documentation failed to get thru to me.
    Yeah, I'm pretty slow on the uptake.
  • DrumsNWhistles, on 10/12/2007, -0/+2Very cool. :)
  • bairy, on 10/12/2007, -0/+2Which is fine unless your viewer happens to be on 1280x1024 and you've forced the page into a tiny 800x600 space.
    Absolutes shouldn't be used unless, well, absolutely necessary to the design.
  • Azewaldo, on 10/12/2007, -0/+1Nice. Very good at answering some important questions. I learned that "clear" will fix the problem I was having with using float. I thought it was some kinda bug, but I guess not.

    Wow, 515 digs in <24h
  • RickyF, on 10/12/2007, -0/+1This is a nicy, easy introduction to a topic that helps all web designer newbies. Thanks.
  • inactive, on 10/12/2007, -0/+1sure just check my profile on how to contact me. I would be glad to help.
  • patmfitz, on 10/12/2007, -0/+1@jadedknight: yeah, I didn't really get into using padding and margins for positioning (I wanted to keep it simple).
  • inactive, on 10/12/2007, -0/+1I guess it could be but it seems to work for me.
  • studiorats, on 10/12/2007, -1/+2great link. Thanks
  • pcgeek101, on 10/12/2007, -2/+2digg

    This is perfect, and I've been watching for articles like this recently, thanks for posting
  • SenyWD, on 02/24/2009, -0/+0Download free standards compliant CSS layouts: http://www.free-css-layouts.com
  • inactive, on 10/12/2007, -1/+1Its ok but I find the best way to postition things is with the DIV order and padding and margins. I do not use the position element actually. Guess its just a personal thing.
  • fyngyrz, on 10/12/2007, -2/+2Let me settle this right now: I meant to write "its", possessive, my use of "it's", the contraction for "it is" was an instance of an habitual error I've been trying to correct since high school (I'm fifty, male, and have trouble with habits like that when writing quickly, which is not an excuse, it's (it is) just more for both of you to laugh at. If you'd *really* something to chuckle over, you should know I own a major literary agency. Seriously. :-)
  • sfields, on 10/12/2007, -2/+2There. So I was right. Thank you. :)

    [ Sorry, grammar errors like this are just pet peeves of mine :) ]
  • beforeseven, on 10/12/2007, -1/+1This is a great tutorial. I've been hacking CSS for a while now, and this managed to fill in some gaps in my knowledge.
  • sfields, on 10/12/2007, -2/+1noahhendrix: Are you referring to me? (Sorry, it wasn't clear in your comment) Because if you are, it's weird because that's exactly what I'm saying: "IT'S" is a contraction of "IT IS", and "ITS" is a possessive pronoun. If we agree on the same thing and you think you're right, how can I be wrong?

    So when fyngyrz said "...and let's not forget that "float" can lock up Internet Explorer, with it's execrable support of CSS", he/she was saying "...and let's not forget that "float" can lock up Internet Explorer, with IT IS execrable support of CSS." And that is grammatically incorrect.
  • wildwobby, on 10/12/2007, -2/+1Hey,

    Will you or someone mind explaining to me how to do it that way?

    I'm learning CSS, and will try to be designing my first CSS site soon... so no tables!


    Thanks
  • aThing, on 10/12/2007, -2/+1Howto make a page resolution-dependent: use absolutes.
  • teh1337one, on 10/12/2007, -4/+3sfields - " it's "ITS", not "IT'S" " is pretty ironic (although it is true). And by the way, their particular float example seems to work perfectly fine in IE.
  • noahhendrix, on 10/12/2007, -3/+1I always thought it was 'it's' because it is a contraction for 'it is' so I believe that you are wrong, well as far I know you are.. and that is all that matters right... ?
  • WaterBreath, on 10/12/2007, -3/+1noahhendrix, "its" it is not a contraction of "it is". Nor are other possessives that do use apostraphes. For example, "grab the dog's collar" is not just shorthand for "grab the dog is collar", which is nonsensical. Possessives are a unique part of the English language, with their own rules. The rule in this case is that possessive pronouns do not use apostrophes (unlike nouns, such as "dog", which do). "Its" is a possessive pronoun, just like "his", "hers", "yours", or "ours", which also _do not_ have apostrophes.

    Hope that clears things up.
  • Leftyshields, on 10/12/2007, -5/+1burp!
  • sfields, on 10/12/2007, -9/+3Why is my comment getting negative diggs? It's called grammar, people! Expanding one's vocabulary should not come at the expense of grammar mistakes.
  • sfields, on 10/12/2007, -16/+10Dude, while on the topic of execrable things, it's "ITS", not "IT'S".

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.