Ask SM: CSS Quick-Question Edition

Advertisement

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. If you have a question related to this challenge, feel free to reach me (Chris Coyier) by one of these methods:

  1. Send an email to ask [at] smashingmagazine [dot] com with your question.
  2. Post your question in our forum.1
  3. Or, if you have a quick question, just tweet us @smashingmag2 or @chriscoyier3.

Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

Div A Before Div B

@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

@_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>
</div>
#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

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>
</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

@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

@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

@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

@pannpann16 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 tutorial17 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 demo18 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

@_Naz19 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 roundup20 of different methods.

Position Absolute With Text Wrap?

@HerrWulf21 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.

wrapping

Separate Or Multiple CSS Files?

@scottradcliff 22 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

@andrewturner23 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. SWFObject24 can help with this and offers numerous other advantages.

Customizing Radio Buttons And Checkboxes

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-in25 does a nice job of it.

customized form

No JavaScript Tooltips

@firewalker0626 writes:

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

CSS Globe27 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 {
    display:none;
}
a:hover span {
    display:block;
    position:absolute;
    float:left;
    white-space:nowrap;
    top:-2.2em;
    left:.5em;
    background:#fffcd1;
    border:1px solid #444;
    color:#444;
    padding:1px 5px;
    z-index:10;
}

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

  1. 1 http://forum.smashingmagazine.com/viewtopic.php?f=10&t=272
  2. 2 http://twitter.com/smashingmag
  3. 3 http://twitter.com/chriscoyier
  4. 4 http://twitter.com/leewillis77
  5. 5 http://twitter.com/ilove2design
  6. 6 http://ryanfait.com/sticky-footer/
  7. 7 http://www.cssstickyfooter.com/
  8. 8 http://twitter.com/_Zapp
  9. 9 http://css-tricks.com/absolute-positioning-inside-relative-positioning/
  10. 10 http://www.brunildo.org/test/IE_rel_abs.html
  11. 11 http://css-tricks.com/navigation-markup-after-content/
  12. 12 http://twitter.com/olliepee
  13. 13 http://twitter.com/devolute
  14. 14 http://www.satzansatz.de/cssd/onhavinglayout.html
  15. 15 http://twitter.com/ofaurax
  16. 16 http://twitter.com/pannpann
  17. 17 http://www.webdesignerwall.com/demo/css-gradient-text/
  18. 18 http://jayrobinson.tumblr.com/post/100728983/using-webkit-background-clip
  19. 19 http://twitter.com/_Naz
  20. 20 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
  21. 21 http://twitter.com/HerrWulf
  22. 22 http://twitter.com/scottradcliff
  23. 23 http://twitter.com/andrewturner
  24. 24 http://code.google.com/p/swfobject/
  25. 25 http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
  26. 26 http://twitter.com/firewalker06
  27. 27 http://cssglobe.com/articles/link_tech/01.html

↑ 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.

Advertisement
  1. 1

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

    0
  2. 52

    Very useful ! Thanx a lot.

    0
  3. 103

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

    0
  4. 154

    its so valuavble for me. thanx!

    0
  5. 205

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

    0
  6. 256

    –== 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! ^_^

    0
  7. 307

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

    0
  8. 358

    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.

    0
  9. 409

    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.

    0
  10. 460

    Great Article!! Thanx!
    and not only for begginers

    0
  11. 511

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

    0
  12. 562

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

    0
  13. 613

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

    0
  14. 664

    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?

    0
  15. 715

    very useful, thank you!

    0
  16. 766

    absolutely awesome article! So incredibly helpful

    Thank you so much SM!

    0
  17. 817

    Awesome. very explicit examples!!

    0
  18. 868

    www.glossygames.com

    May 26, 2009 10:20 am

    I found all of these tips very interesting and i will try them in the near future. the html text with a gradient did not work for me on Firefox though

    As for “Position Absolute With Text Wrap” my solution when confronted with this problem was to place a floating div in the middle of the text. took some trial and error to make it work but it looked fine. this is not the most elegant solution but it got the job done.
    http://www.glossygames.com

    0
  19. 919

    Both solutions for Sticky Footer do not work in IE 8

    0
  20. 970

    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.

    0
  21. 1021

    Position Absolute With Text Wrap?
    There is a solution I’ve tried on one project;

    although it requires whether to know container’s height, or to use javascript;

    here is an image illustrating it:
    http://img36.imageshack.us/img36/3042/floatbottom.png

    0
  22. 1072

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

    sorry

    0
  23. 1123

    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.

    0
  24. 1174

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

    0
  25. 1225

    Welovenicethings

    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.

    0
  26. 1276
  27. 1327

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

    0
  28. 1378

    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?

    J.

    0
  29. 1429

    This is what I want ;)

    0
  30. 1480

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

    0
  31. 1531

    Great post!!! Thanks!

    0
  32. 1582

    For aligning labels and inputs problem:

    Let the labels and inputs items float.

    0
  33. 1633

    I think, that you are mistaken.

    0
  34. 1684

    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

    0
  35. 1735

    6dGwl5 comment6 ,

    0
  36. 1786

    What is better, Yahoo, AOL, Hotmail or Gmail ?
    And why ?
    But GOOD REASONS! not no life reasons.

    0
  37. 1837

    How can i get alot of friends requests on Facebook ?
    I would love to have alot of friends on facebook , how do i get plany of requests at once ?

    0
  38. 1888

    How can i believe if it’s really this celebrity talking to me on facebook and myspace ?
    Everything no life people are making fake accounts !!! and few times it’s the real one talking to me on facebook and myspace! but how can i know if its really this person or the fake one ? PLEASE HELP ME! :(

    0
  39. 1939

    How do i transfer contacts from Yahoo To Gmail ?
    How do i transfer contacts from Yahoo To Gmail ?
    But all contacts because whenever i import/export contacts to Gmail it dasnt transfer everyone but like half and the rest it says, contacts could not be imported for technical isueses

    0
  40. 1990

    How or where can i find an talent Agent/Agency ?
    How or where can i find an Agent/Agency ?

    0
  41. 2041

    How can i be a celebrity ?

    0
  42. 2092

    How can i know which one to take for being my friend and to believe s/he is the one to help me and belive in ?
    They tell me, “ If you wanna succeed in everything , ALWAYS get close to these smart and popular and famous friends, be with them always close and they well always help you and get you in everything SPEND MORE TIME WITH THEM !! “

    But how can i find which ones are they and where can i find them ?

    PLEASE HELP ME ! :(
    2 hours ago – 4 days left to answer

    0
  43. 2143

    How can i transfer all my contacts from yahoo to hotmail ?

    0
  44. 2194

    How do i transfer contacts from Yahoo To Aol ?

    0
  45. 2245

    @ron…WTF?

    0
  46. 2296

    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!

    0
  47. 2347

    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.

    0
  48. 2398

    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.

    0

↑ Back to top