Ah Ha Moments – Handcrafted CSS

I recently started reading Handcrafted CSS by Dan Cederholm (just want to add that I am not being paid to blog about this book, it’s amazing, go buy it). I just finished chapter 1 and there are a few Ah Ha! moments I want to share. Most of these are uninteresting to your seasoned CSS cowboy. For me it brings a greater understanding of CSS and a sharper tool in my toolbox.

Ah Ha Moment #2: .myclass { position: relative; }

If you look at the textbox above we have a simple textbox with a calendar logo right after it (Sorry google reader fans, embedded jsfiddle doesn’t show up yet. Promise I’ll try and fix that.).

This is a total fail. I want the logo to be inside of the textbox on the right side. To do that we are going to use { position: absolute; }. Here’s where you say, “wait I thought your Ah Ha moment was { position: relative; }”. Ok so what happens when we set position absolute on the icon like this

.date-picker .date-icon {
   position:absolute;
   top:0;
   right:0;
}

Whoa! The icon went way over to the top right of the jsfiddle. That’s because we are absolutely positioning the element relative to the closest parent. In this case the closest parent element that is { position:relative; } is the <body> tag. That’s no good. No worries its easy to fix.

.date-picker { position: relative; width:250px; }

.date-picker .date-icon {
   position:absolute;
   top:0;
   right:0;
}

Bam! Now the closest relative parent element is the div wrapping both the textbox and the icon. Now just tweek the top and right values until the icon is where you want it.

.date-picker { position: relative; width:250px; }

.date-picker .date-icon {
   position:absolute;
   top:15px;
   right:-10px;
}

Summary tl;dr;

Absolute positioning is not evil if you are positioning it relative to some kind of container.

Always herpin, but not derpin

-Ryan

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Ryan Rauh

My name is Ryan Rauh and I like shiny things. If I've seen it on twitter more the twice most likely I've looked at it or tried it. I really like memes and other silly and seemingly useless things out on the internet. I blog about things *I* think are cool and interesting, I hope you will find them cool and interesting too.
This entry was posted in CSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://twitter.com/willemodendaal willemodendaal

    Agreed. Absolute/Relative positioning is pretty funky.

    • Anonymous

      It’s one of those little things that once you get it… its like Oh I see now.

  • Jesse Williamson

    If I may offer suggestion. Rather than specify width on .date-picker, set it to display: inline-block and specify the width on the input. That way .date-picker is actually the same width as the input. With the current CSS, the input actually exceeds the width of its container because of the margin/padding.

    Also, I know it’s a date-picker example, but you can technically enter text that gets “hidden” behind the icon. If you specify additional padding on the input, you can avoid this, but it changes your “right” style for the icon. I threw this all together here (looks good in FireFox and Chrome): http://jsfiddle.net/GgnCk/

    • Anonymous

      Thanks! I will fix my examples. I like the padding right fix… Didn’t notice that the text would go behind the icon. 

  • http://davidalpert.myopenid.com/ david alpert

    IIRC absolute positioning is not relative to the closest parent with {position:relative}; rather it is absolutely positioned relative to the closest *positioned* parent.  As such, {position:absolute} should also work to create a “positioning context” for any of it’s children, though you’d have to try it to double check my memory.

    The reason that {position:relative} is used in examples is that {position:relative} without a top, left, right, or bottom value is treated essentially as {position:relative;top:0;left:0;} which means “take this element’s box, position it as per the normal flow of the document, then move it relatively 0 pixels down and 0 pixels to the right. a.k.a. don’t move it at all, which is why you can use {position:relative} to create a “positioning context” for an element’s children without impacting the positioning of the parent element.

    • Ryan Rauh

      interesting… I will have to experiment more with this. I am far from a CSS cowboy but I’m learning. Thanks for sharing! 

      • http://josephvano.wordpress.com/ Joey Vano

        Positioning can get complex once you start nesting … I try to go the float right for what I want to do first. If I can’t do it cleanly enough, then I go the positioning route.

        Another reason is only modern browsers can handle nested positioning well enough (looking at you IE7).

        • Anonymous

          Haha spoiler alert, that’s going to be another blog post actually.

  • http://twitter.com/webman_ Craig A Rodway

    If all you want is an image in a text box, you could just set it as the CSS background, like in this version of the fiddle: http://jsfiddle.net/GgnCk/21/

    • Ryan Rauh

      True… You will need to use absolute positioning if you want the image to be clickable, which is the desired behavior for a date picker. 

  • http://twitter.com/ashic Ashic Mahtab

    Awesome awesome tutorial that’s all a bunch of aha moments:
    http://www.barelyfitz.com/screencast/html-training/css/positioning/

  • Anonymous

    This was an ah-hah moment for me, too, when I learned about this. That was maybe 2-3 years ago and I still use it all the time.