Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Ask SM: CSS Quick-Question Edition

This is our sixth installment of Ask SM, featuring reader questions about Web design focusing on HTML, CSS and JavaScript. These entries are not all questions, but rather quick Twitter responses to the query, “What has been your most difficult CSS challenge?” Among other things, this post covers the sticky footer issues, positioning elements at bottom of a div, on having layout, aligning labels and inputs, auto top and bottom padding, z-index and more. [Content Care Dec/06/2016]

You may want to take a look at the following related posts:

Div A Before Div B Link

@leewillis774 writes:

I currently have div B before div A in the HTML, and div B has float. I want to reproduce this, but with div A before div B in the HTML.

As long as both div B and div A have fixed widths, which when added together is less than or equal to the width of its parent, then it doesn’t matter which of them comes first in the HTML!

float order

Equally important to mention is that if div A and div B do not have a fixed with, then they should, because floating elements without widths is a recipe for trouble.

@ilove2design5 writes:

I must admit, the “sticky footer” CSS problem was damn annoying until I found some solutions on the Web.

Agreed! The “sticky footer” pure-CSS solutions out there are pretty darn clever and come in handy regularly. Here are two:

sticky footer

The both share one weakness, though, in that they require the footer to be a fixed pixel height, which is occasionally problematic. Generally, I just go bigger than necessary and give the text plenty of room to grow.

Positioning Elements At Bottom Of Div Link

@_Zapp8 writes:

How do you position stuff at the bottom of a div with (or without) position absolute and relative, so that it will look the same on all browsers.

When you give an element relative positioning, that limits the scope of absolute positioning on all its child elements. This is one of my favorite techniques in CSS Web design. I go over it in more detail here9, but let’s take a quick look.

<div id="parent">
     Lorem ipsum....
     <p id="child">*Just a little footnote</p>
#parent {
   position: relative;
   padding-bottom: 20px;
#child {
   position: absolute;
   bottom: 0;
   right: 0;

relative and absolute positioning

Just a quick note, the bottom/right combo needs hasLayout in IE 610 to work right.

Positioning Of Divs, Despite Source Order Link

Alex Ross writes:

Div top, middle, bottom. Top goes below content.

I think what you are getting at here is having the header of a website come after the main content in the HTML markup yet appear to be on top, where a header belongs. Part of the power that CSS gives us is that our designs don’t have to be source-order-dependent, like table-based layouts do. Here is how I would do it:

<div id="page-wrap">
     <div id="main-content"></div>
     <div id="header"></div>
#page-wrap { padding-top: 100px; position: relative; }
#header { position: absolute; top: 0; left: 0; width: 100%; }

This could potentially bring SEO benefits, especially if loads of content in the header are pushing down more important page content. See an example of this, where I talk about putting excessive navigation below the content11.

Centering Inside Resizeable Area Link

@olliepee12 writes:

I always have mental problems centering an automatically resizable div inside a 100%-width div.

Divs default to 100% wide, so if you have a div within a div without setting a specific width, that inside div will be the same width as its parent. If you do set a width for the inside div, you can make sure it’s centered with the ol’ classic centering trick.

div {
    margin: 0 auto;

On Having Layout Link

@devolute13 writes:

Forgetting to apply zoom: 1; on everything in the IE conditional style sheet.

If anyone hasn’t heard of this, applying zoom: 1; to elements is a way to force elements to gain the proprietary hasLayout property in IE browsers. This can fix a number of (truly) weird bugs in IE.

Read more about it here14.

on having layout

Aligning Labels And Inputs Link

@ofaurax15 writes:

Correct alignment of a form’s “label-input”. I’ve not found a definitive solution in pure CSS.

Both labels and inputs (all the various types) are inline elements by default. Doing things like making them block-level elements and floating them can be very useful and help you avoid “unnecessary” markup. However, I think that’s the first step towards cross-browser inconsistency. I have pretty decent luck many times leaving them as inline elements and using the vertical-align: middle; property to keep things inline. Then wrap the label/input pairs in divs to cause the necessary line breaks. This is particularly useful with radio buttons and checkboxes. Also remember that if only IE is giving you grief, you can use conditional style sheets and relative positioning to nudge particular elements into place.

Text With Gradient Background Link

@pannpann writes:

Creating background gradients inside dynamic numbers/letters.

Typically, text in Web design can be set to a solid color, and that’s it. If you’d like a gradient effect over real Web text, a couple of methods are floating around. One is to lay a transparent PNG on top of the text that darkens a portion of it. Web Designer Wall has a tutorial16 on this, but note that this causes the potentially serious usability problem of not being able to highlight the text.

gradient text

If progressive enhancement is your game, Jay Robinson has a demo17 on how you can use WebKit’s proprietary -webkit-background-clip to achieve this.

background clip

Another slightly more laborious method would be to create all 10 digits as graphics, and then create unique CSS classes for each digit. Then use markup like <span class="one">1</span><span class="two">2</span> to present the letter 12, and use CSS image replacement to replace the 1 and 2 with your custom graphics.

Auto Top And Bottom Padding Link

@_Naz18 writes:

Trying to make a div auto-center in your browser! ugh! still cant get it to pad auto top and bottom!

Unfortunately, vertical centering in CSS is a lot more difficult than horizontal centering. If you know the exact height of your div (that is, you set it yourself), you can use absolute positioning to get it done.

div {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -100px; /* half of div's height */
    height: 200px;

If you don’t know the height, as painful as it is to say, using a table and the vertical-align property of table cells can get it done. If you’d like to explore other methods, the ThemeForest blog has a nice roundup of different methods.

Position Absolute With Text Wrap? Link

@HerrWulf19 writes:

Been having difficulties positioning a div to the bottom-right, with text wrapping around it…

This is an interesting one. Of course we can position a div to the bottom-right with absolute positioning as described above. But as soon as we do that, the div is “removed from the flow” of the document, meaning that regular text in the parent div will ignore its placement and go right over it.

I’m struggling to think of a really great solution for this… So if anyone has something, please share it in the comments. One short-term, hacky solution would be to force some sensibly placed line breaks in the text at the bottom that would make it seem like it’s wrapping at default font sizes. Or place the image inline and floated to the right, but in the middle of the text, towards the bottom of it.


Separate Or Multiple CSS Files? Link

@scottradcliff 20 writes:

What is your preferred method of using CSS? A few separate files (e.g. type.css, layout.css, etc.) or one large file?

The only circumstance in which I like to break out CSS into multiple files is when the CSS is totally unique to a certain page, and loading it for every other page would be useless. Like if you have an “About” page that has unique styling, I’d load the default style.css, and then load an about.css file after it to override anything that it needs.

I don’t like breaking CSS into layout.css, typography.css, etc. just because that isn’t how I think. When I look at the footer on a website, I want to look at all the CSS for that region in one place, not have to open two different files. That is just how my mind works, but I don’t have any particular problem with doing it the other way.

Super-efficent nerds will yell at you for requiring unnecessary HTTP requests to load extra CSS files, which can slow things down. And so, to be extra fast, you should load only one CSS file and one JavaScript file per page. They would be right, of course, if speed were the only consideration. Practicality, though, counts for a lot in my book. And let’s face it, for most of the websites that we work on, half a zillionth of a second doesn’t matter as much as the budget.

Z-index And Drop-Downs Link

@andrewturner21 writes:

The hardest issue I’ve been working on was one last week, where I was stuck with an issue relating to z-index and drop-down menus

I’m surprised at how often problems with this come up. Most drop-down menus rely on some combination of absolute and relative positioning. Once elements have this, they become part of the z-index “flow,” so giving them high values will usually get them on top of whatever you need them to be on top of.

The big exception, which seems to come up incredibly often, is when you need to overlay Flash content. Usually the solution here is to make sure that the Flash content is embedded with wmode=transparent. SWFObject22 can help with this and offers numerous other advantages.

Customizing Radio Buttons And Checkboxes Link

Anonymous Email writes:

For some time, I have been trying to create custom combo boxes and checkboxes for my forms based on images. I followed some tutorials with no good results, and I haven’t yet found a solution. What is a clean way to get this done?

With pure CSS, there is no way to truly customize radio and checkbox inputs, at least not by replacing them with custom graphics. JavaScript comes to the rescue, though, by hiding them and replacing them with custom elements. Those custom elements will have click handlers on them that visually replicate a radio button being on or off, and invisibly updating the “real” hidden form element.

This jQuery plug-in23 does a nice job of it.

customized form

No JavaScript Tooltips Link

@firewalker06 writes:

How can we get a tooltip effect that can be used in any browser and without JavaScript?

CSS Globe had an article way back that does a good job of explaining it. It definitely can be done, and I’ll explain briefly here. You can count on the :hover effect on anchor links in any browser, so you’ll want to use that. Within the anchor link, you can have a <span> element which by default is set to display: none;. Then, with the hover CSS, you can display the span.

a span {
a:hover span {
    border:1px solid #444;
    padding:1px 5px;

css tooltip

These values display a box with the width it needs to appear above and to the right of the link, much like browser defaults. But you can customize this however you’d like. But make sure not to use a title attribute on the link, otherwise both would show up on hover and would look weird. So, this effect should purely be an added bonus and not valuable required content because it won’t be very “accessible.”

That wraps up another installment of Ask SM! If you have questions to ask, refer to the top of this article on ways to submit them.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23

↑ Back to top Tweet itShare on Facebook

I create websites and help others create better websites through writing and speaking. I consider myself a lucky man for getting to work in such a fun and rewarding field.

  1. 1

    Wow! Nice!

  2. 2

    HerrWulf here. In the end I ended up going with the inline image to get it to work. It’s not a solution I’m overly happy with, but it worked. Placed the image before the last few blocks of text that were, thankfully, hardcoded in place otherwise that probably wouldn’t have even been a realistic fix.

  3. 3


    May 25, 2009 2:01 am


  4. 4

    Wow, thanks for these

  5. 5

    nice ! beginners (like me) need more posts like this .

  6. 6

    Great thanks, will be very useful.

  7. 7

    A year ago i tried to solve the “Position Absolute With Text Wrap?”-problem with two text-columns. You can find my javascript solution here (german, feel free to translate), including two demos: 1, 2 (including drag&drop of the box)

  8. 8

    Thanks, Great article, very usefull stuff…

  9. 9

    Thanx for another great post that will save much time programming sites. It’s always the same little things where one looses so much time for fixing them. So these kind of posts are really very helpfull!

  10. 10

    Thanks for helpful tips,.. useful post! ;)

  11. 11

    “Div A Before Div B” Also, absolute positioning would work too. It depends on your overall structure, but if Div B had top 0 left 0, and Div A had top 0 right 0, they’d do a switcheroo.

  12. 12

    Another perfect article. Thanks for the great tips!

  13. 13

    Wow, coo. That’s realy helpfull … Thanxs

  14. 14

    The input boxes in “Customizing Radio Buttons And Checkboxes” look quite odd in Opera… The cursor blinks on the bottom instead of being in the middle (as seen anywhere else)… Seems like Opera works differently with forms…

  15. 15

    Hastimal Shah

    May 25, 2009 3:23 am

    Thanks for your great tips..
    I come to across new things…
    Please post more this kind of tips…

  16. 16

    Nice one!

    I also have a question: how can you display as many divs in a row as the large is the largest wrap?
    To better understand what I mean, an example:

    lets say the main wrap width is 94%, on a monitor of resolution 1024×768, is 962px, and I wont to have 4 divs of 250px in a row, but if the resolution is 1280*1024 i wont to have 5 divs in a row, and if the screen resolution is bigger than 1280*1024 i wont to have 6,7 divs per row.

    It is possible do to only with css? Hope that I esplain well what I wont to make.

    Thanks for help!

  17. 17

    Shapia web services

    May 25, 2009 4:02 am

    I am really happy that some is there to help me when I have some design questions. I have taken down the email Address. My next job would be dropping all my doubts on the email to web design services at affordable rates to all our clients.

  18. 18

    R 15. Hi Andrea, It will do that itself automatically I think. by just float:left all the 250px divs, but you do need to have a check in IE6.

  19. 19

    Thank you for this great post. Its really help me out.

  20. 20

    Fantastic. I have run across all of these issues in the past year or so. Great to see them all in one place for people who might not have spent hours trying to figure it out.

  21. 21

    I have a question.
    How to make a pure CSS-based dropdown menu that is accessible and can be used without a mouse.? I.e how do you make it expand when you tab onto it (instead of hover over it with the mouse)?

  22. 22

    Ashish Tiwari

    May 25, 2009 5:41 am

    In “Positioning Elements At Bottom Of Div” the diagram should say p#child as the markup has the p tag!

    rest is good though, admittedly the one about radio and check-boxes, sometimes people just overlook them and assume OS defaults, CSS should have some way to style them!

    also, after IE7, the select box is also more styleable in Windows-if you care you customize it, some info on it can be handy.

  23. 23

    omg this post is amazing

  24. 24

    Another perfect article. Thanks for the great tips! [2]

  25. 25

    […that if div A and div B do not have a fixed with…] (Width?)

    Great post, and keep up the good work. Oh! And the link on the index page dosn’t work.

  26. 26

    This article will be really useful for me.

  27. 27

    Nice! Thanks for the nice tips!

  28. 28

    @donvanone: Looks interesting, thanks for posting it up.

    @Chris Coyier: It does look like an interesting possibility. I’ll be taking a look into it when I get the chance. I’m still hesitant when it comes to using javascript for quite a few things though, but if nothing else it’ll be an opportunity for me to get to grips with the language a bit better.

  29. 29

    I love this how-to tips-and-tricks explained in the same page so that we don’t have to go through 1000s of web-sites to figure it out.

    Thanks again SM!

  30. 30

    On “Separate Or Multiple CSS Files”

    I use these files:


    Both layout.css and screen.css import formatting.css. Seems pretty logical to me. Any thoughts?

  31. 31

    This is a really valuable post. Thanks a lot.

  32. 32

    @ Chris Coyier
    Thanks for that link but that example does not work without a mouse. Which was my question (how to get it to work with a keyboard and tabbing).

  33. 33

    i think the centering doenst work in IE 6. i dont want to discuss die IE 6 issue but as long as a big part of the users work on IE 6 we have to work for IE 6 too. i hate i too. dont get me wrong!
    so centering in IE 6 requiers a parent block element with text-align center and the centered element needs a text-align left (or right to undo the IE 6 related centering) a.f.a.i.k.

  34. 34

    Since zoom is IE specific and doesn’t validate, I use the following to invoke layout in IE on elements that don’t have to be floated.

    Note the double declaration.

    element { display: inline-block; overflow: hidden; }
    element { display: block; }

    You could also make a class out of it and use it where ever you need to invoke layout.

  35. 35

    Chris Greenhough

    May 25, 2009 9:05 am

    CSS and vertical positioning = the absolute bane of web designers*. If this were not the case, would there be so many different solutions and tutorials on how to achieve something that html tables have been able to do for as long as I can remember? It’s the thing that put me off the move to table-less layouts for a very long time, I can tell you.

    * Well, besides Internet Explorer, obviously.

  36. 36

    Interesting tips… Thanks a lot ! :)

  37. 37

    Mohammad Adli

    May 25, 2009 9:46 am

    i love the day i came to this awesome site, thanks my Lord

  38. 38

    These are great, thanks! As a developer, the ins and outs of CSS / cross-browser annoy me to no end. CSS almost always falls to the bottom of my ‘need to know’ list, and as a result I sometimes result to (yeah, I know) tables and stretched pixels for any layout height woes. These definitely help get away from that.

  39. 39

    Thank you all for reply! I really appreciate your help! Tnx tnx tnx!

  40. 40


    this seems to work for me, though I have only tested in IE and Firefox

  41. 41

    @Separate Or Multiple CSS Files? – One of the most honest answers I’ve seen. So many people get wrapped up in the “geek” factor, they forget the reality of the situation.

  42. 42

    Aaron Mc Adam

    May 25, 2009 6:00 pm

    ahh, very sweet article! Need some more along these lines!

  43. 43

    nice article! I was just wondering what css properties for IE6 the “zoom: 1” fixes

  44. 44

    Good stuff, thanks

  45. 45

    Jan Kovařík

    May 25, 2009 11:26 pm

    GREAT, easy and useful, thanks!

  46. 46

    Div A Before Div B

    I think this one was misunderstood. As I understand the question, only one of the divs is floating. In your graphic, the lines indicating a paragraph would be Div A and one of the floating boxes Div B.

    The question is how to keep the Div B floating at the top of the paragraph when it occurs after Div A in the markup.

  47. 47

    Well done nice post and i specially liked the solution for the “Customizing Radio Buttons And Checkboxes” thanks :D

  48. 48

    Very useful ! Thanx a lot.

  49. 49

    All the tips were great :)
    It saves a lot of my time and my pages look better now :)
    Thanks for all :)

  50. 50

    Ekin Ertaç

    May 26, 2009 3:33 am

    its so valuavble for me. thanx!

  51. 51

    “Div A Before Div B”: Order is important for SEO purposes as you mention later at “Positioning Of Divs, Despite Source Order”

  52. 52

    –== Matchcougar.C’om ==– Best Cougar dating site in the world!
    For Cougars, dating a younger man can be exciting and feel younger. And also you may find yourself more compatible with young men.
    For younger men, dating an older woman has numerous advantages. You can sometimes learn valuable advice from her on how to conduct himself in a difficult situation. She is your best listener and supporter.
    Join us and contact tens of thousands of cougars and cougar admirers! ^_^

  53. 53

    another great article, you guys are filling up my favs’ folder !

  54. 54

    I completely agree with you in regards to single CSS vs multiple CSS. I’ve felt wrong about that for awhile since everyone wants typography.css, etc.

  55. 55

    Shibi Kannan

    May 26, 2009 7:22 am

    Chris Coyier on SM – Amazing – very nice useful article. I hope this becomes a regular section so that readers can regularly ask questions and experts can answer them.

  56. 56

    Great Article!! Thanx!
    and not only for begginers

  57. 57

    Thanks for the help. I ask myself these questions some days.

  58. 58

    Very Nice!!!! Good topic!!! Respect!!!!

  59. 59

    Yeah! This is very helpful. One I am sure to reference over and over again. Many thanks and keep them coming.

  60. 60


    May 26, 2009 9:36 am

    I desperately need to float an item to “bottom-right” with text-wrap as in your example “Position Absolute With Text Wrap?”. It’s a real pig! I can’t just hack it with tags since the content of that div is loaded stnamically from a cms. Can anyone help?

  61. 61

    very useful, thank you!

  62. 62

    absolutely awesome article! So incredibly helpful

    Thank you so much SM!

  63. 63

    Awesome. very explicit examples!!

  64. 64

    alex dumencu

    May 26, 2009 2:17 pm

    Both solutions for Sticky Footer do not work in IE 8

  65. 65

    Brian Temecula

    May 26, 2009 2:44 pm

    Nice Article. I know most of the content, but it was good to see it all in one place.

  66. 66

    oh, i forgot to notice that both elements should also have “clear:right;”


  67. 67

    Five Minute Argument

    May 27, 2009 3:58 am

    Re: multiple CSS files, geeks that know what they’re talking about will always warn against premature optimisation: combining all CSS into one huge file is usually that. Having said that, if you automate the combining (which should be trivial), you win both ways: maintainable AND efficient.

    Re: custom form elements, please be careful with this. Changing the user’s native UI is a sure way of confusing them. Doing this via CSS would be bad enough, but as soon as you start trying to fake it using javascript, you run into masses of issues relating to keyboard access, event-handling, cross-borwser compatibility etc. Maybe one of the frameworks suggested has actually solved this well, but I’ll always chose to use the tools that are provided and in use by millions of others than creating a custom version just for the sake of some ‘pretty’ graphics.

    Re: vertical align, it’s a real shame that CSS doesn’t handle this better, but it’s almost never actually required. It’s quite a poor decision to use tables and abandon accessibility rather than rethinking a tiny element of your design. Good designers work with constraints.

    Re: aligning labels, I think the question was probably more concerned about horizontal alignment than vertical. I.e. lining labels/inputs into two nice, neat columns.

  68. 68

    div { margin: 0 auto; }
    seems it doesn’t work for IE 6.0

  69. 69


    May 27, 2009 4:57 am

    In regards to Z-index And Drop-Downs and flash breaking your ordered layers. It is worth bearing in mind if you are making a custom video player and you want a full screen mode that wmode=transparent breaks this unless you are using the very latest version of flash 9 or flash 10.

    Check out youtube home page, and check out the video in the top right hand corner (it is not there all the time), when it is, you will notice it has no full screen mode due to the javascript drop down menu in front of it.

  70. 70

    @Five Minute Argument
    Thanks, but text-alingment of center ->left is an alternative solution for IE 6.0

  71. 71

    Z-index And Drop-Downs
    I didn’t get the solution for z-index. How do you need to position the dropdown to make z-index work?


  72. 72

    This is what I want ;)

  73. 73

    @veron It does work in IE6. Are you using a valid doctype? Make sure IE6 is not in quirks mode.

  74. 74

    Great post!!! Thanks!

  75. 75

    For aligning labels and inputs problem:

    Let the labels and inputs items float.

  76. 76

    I think, that you are mistaken.

  77. 77

    A tip for vertical alignment of text is to make a button height say 20px and then set the line-height: 20px also, this way the text will be exactly in the middle of the button.

    Another good tip is that if you want to get ie to “have layout” you set width:100% overflow:hiddden on the container.

    And another good one is, if your having problems with margin colapsing, set overflow to something but visible to make it use both margins.

    // Cheers

  78. 78


  79. 79

    This is the pesrice blog for anyone who needs to find out about this topic. You notice a lot its virtually hard to argue with you (not that I really would need?HaHa). You undoubtedly put a new spin on a topic thats been written about for years. Nice stuff, just great!

  80. 80


    March 1, 2012 4:13 am

    I think YUI grids is worth mtoienning given its really good grid system and the fact that it also resets default browsers styles and eases font-size adjutments.Last but not least it is available through Yahoo!’s own content delivery network.

  81. 81

    well yes but I’ve no idea what kind of compression that is doing. Eg. Save As in ohptoshop doesn’t compress anything like that which save for web does, so google GIMP web compression.


↑ Back to top