The best solutions are often the simplest. Here’s a list of 8 tips that contain only one css property.

1. Vertical centering with line-height

line-height:24px;

When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts

#main{
	overflow:hidden;
}

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.
I wrote an article about it a while back.

3. Prevent line breaks in links

a{
	white-space:nowrap;
}

This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.

4. Always show Firefox scrollbar

html{
	overflow:-moz-scrollbars-vertical;
}

Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.

5. Centering block elements horizontally

margin:0 auto;

For all modern browser this line of css is enough to horizontally center a block level element.

6. Remove vertical textarea scrollbar in IE

textarea{
	overflow:auto;
}

Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.

7. Force page breaks when printing your document

h2{
	page-break-before:always;
}

With this line of code you can control places where you want your pages to break when printing a document.

8. Remove active link borders

a:active, a:focus{
	outline:none;
}

Originally found here, this will remove dotted outline from focused or active links.

Do you have any short and brilliant CSS solutions?

Post them here. It would be great to have them collected at one place.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (96 Comments)

1. Eoghan Murray
   March 10, 2008

   For a cross browser, validating version of #4 you could try html{ overflow-y:scroll; }

2. Petter
   March 10, 2008

   Start every stylesheet with * {margin: 0; padding: 0} This means a little more work as you'll have to define margin and padding on every element that needs it, but you're less likely to be surprised by how one browser applies more/less margin to an element by default, thus breaking your site.

3. Niall Doherty
   March 10, 2008

   Nice tips. To the previous commenter though, I'd recommend NOT using * {margin: 0; padding: 0} There are better, more sophisticated CSS resets out there. Using * {margin: 0; padding: 0} is a heavy load on the browser, as it will reset margins and padding on every single element, whether necessary or not. Google for Eric Meyer CSS reset. That one's pretty solid.

4. Tom
   March 10, 2008

   I don't like so much the last tip, removing active link borders is not so good for accessibility.

5. nikola
   March 10, 2008

   thnx for tip 3! ... this is new one for me ...

6. Rash
   March 10, 2008

   I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;} basically means "traverse every css element and give it these attributes". That is a very unnecessary strain on the server and a bad semantic practice, as you have to give some elements padding/margin again, after stripping them.

7. Jamie
   March 10, 2008

   a:focus{ outline:none; } I love this one ~ its really under used and make for a cleaner presentation on clicking links.

8. jinesh
   March 10, 2008

   #2 can also be used to clear floats, use with _height:100% to make IE6 behave :)

9. Sean
   March 10, 2008

   I would only remove the outline from links on certain objects - in particular when building something with Ajax. Otherwise, I prefer to leave it be.

10. Shane
    March 10, 2008

    Wow....I've never known about the page break css to force page breaks when printing! I had a recent project where the client insisted on having certain sections be on separate printed pages...I wish I had known this then, but I'm good to go now! THANK YOU!

11. chris
    March 10, 2008

    great list, hopefully you can keep making it bigger! but for #1, it only works if you have 1 line of text, anything more it breaks? any solutions?

12. niksy
    March 10, 2008

    Nice list, thanks for the tips!

13. rockoyster
    March 10, 2008

    Great tips. Don't you mean prevent horizontal shift in #4?

14. cssglobe
    March 10, 2008

    thanks, rockoyster. Corrected!

15. john
    March 10, 2008

    Regarding the removal of active borders and accessibility, as long as you substitute the dotted border with another visible hover & active state, you can have the best of both worlds: a:active, a:focus {background:#ccc; outline:none;}

16. Nate
    March 10, 2008

    Rash, The server doesn't traverse anything, your web browser interprets the markup and css, and while the * reset isn't optimal (see Eric Meyer's reset), it doesn't put any extra strain on your server or your web browser.

17. mginop
    March 10, 2008

    img { border: 0; } is used in all my style sheets to prevent any linked images from displaying those ugly borders.

18. Andy Gongea
    March 10, 2008

    For 2 separate floated divs ( x- float:left y-float:right; ) within a container with or without background. You have to add a div befor closing the wrapper with a class .clear { clear:both; } for good visible background.

19. Darren Hoyt
    March 10, 2008

    Great points. For #4, you can also use: body,html { min-height:101%; }

20. Jeff
    March 10, 2008

    .right{float:right;} .left{float:left;} This allows you to quickly float anything right or left, I mainly use within the content area. Also, a HUGE thing I do is at the top I put my color scheme. I put a color description and hex. I'm always sure to put a pound and a semicolon so when I copy and paste I don't have to add that stuff. See below: /* COLOR SCHEME dark blue #112730; lighter blue #EEF2F2; lime green #D6FB00; */

21. Jess
    March 10, 2008

    Hi Jeff personally I disagree with classes named left and right, this does not encourage well thought-out markup and stylesheets. It also does not add any semantic meaning to the markup, class names should be representative of the content they hold and not the visual appearance that way you can change the design at anytime without changing the html. IMHO class left and right is simply bad practice, the same goes for class=blue or red or green etc, I.E. anything that represents the visual look. Jess

22. Miller Medeiros
    March 11, 2008

    /* redefining font-size to work with Em as it was Px */ body{ font-size: 62.5%; } i use it when i want to set the sizes using EM.. this way 10px will be 1em and 18px will be 1.8em.. cheers..

23. Brian Rock
    March 11, 2008

    As mentioned before, overflow-y is an alternate solution for forcing a vertical scrollbar in Firefox. It's not compatible in every browser, but it's CSS 3 compliant - so in theory it should be compatible in most browsers someday. @Jess, I think classes like alignLeft and alignRight can be very appropriate. What if I alternately align images on a page to the left and right? Should I re-define the entire class of image twice, so that I have a left and right alternative? Or should I give it two classes, one with the type of image, and one with the correct alignment?

24. vista bbs
    March 11, 2008

    Great points. For #4, you can also use: body,html { min-height:101%; }

25. Karim
    March 11, 2008

    a:focus{ outline:none; } I hate this one ~ thanks god it's under-used. It exists for a reason: accessibily.

26. Zoznam Horoskopy
    March 11, 2008

    Very know, but useful tips.

27. hasan
    March 11, 2008

    very useful tips u can give link on div like :" <a href=""><div></div></a>"

28. hasan
    March 11, 2008

    <a href=""><div></div></a>

29. James
    March 11, 2008

    Hasan: why bother with the div at all? Just do a { display : block; }

30. Mike Cherim
    March 11, 2008

    Good tips. For number 8, you really should add that this should only be used when link focus/active styling (like a background-color) is added. Link outlines are pretty weak for keyboard accessibility, but better than nothing, so you should emphasize the need for added styling --- to avoid leaving nothing.

31. jerang
    March 11, 2008

    For #3 whitespace: nowrap; doesn't work right in IE6. You would be surprised how many people still use it, despite the fact IE8 is coming out soon.

32. Jeff
    March 11, 2008

    @Jess, right and left are very necessary and speak as much about an object as a "clear" class does or an "adr" class does for a div in microformat. In addition, Brian Rock makes a good point, that not having these classes would force us to create redundancies within our <abbr title="Cascading Style Sheets">CSS</abbr>. Isn't that a part of our job? To increase efficiency?

33. Jonathas Scott
    March 11, 2008

    For a "auto" centered block on IE: body{ text-align: center; }

34. Arkrep
    March 11, 2008

    Nice post, I honestly thought that I would find anything I already use, but you've posted up some tricks I didn't know.. Thanks

35. hung
    March 11, 2008

    toi yeu em va` toi chi/ biet yeu em^___^

36. Mike
    March 11, 2008

    @Jess, I agree with Jeff, as long as nothing else is added to the .left and .right classes, as they are structural, not merely presentational like .blue etc. I also make use of a singe-purpose class: .noPrint - I presume I don't need to explain that one?

37. Thomas Thomassen
    March 11, 2008

    I strongly recommend NOT to use tip #8. That little dotted frame is the only thing to indicate where you navigate on a page when you use just the keyboard. Removing it causes accessibility issues.

38. john
    March 11, 2008

    @Karim, @Thomas, etc. As I mentioned already, there's nothing wrong with removing the dotted lines from links, as long as you use something else for your visible hover & active states. I find the dotted lines annoying...but changing the font color, adding a background color, etc will still make your site accessible. Why keep a default style when it can be changed without any harm done?

39. Bjarni Wark
    March 11, 2008

    img { display: block } This will remove any white space beneath an image, as images are inherit as an inline element, the space below is created for descenders, eg g j. display: block will remove that space, making it flush with the image.

40. Jess
    March 12, 2008

    @Brian I get where you coming from, and it does depend on the situation, my major problem with it it the overuse of if, I do uses classes left and right myself but gripe is with people who use .left and .right to float EVERYTHING - i have worked on projects like that in the past and its a big PAIN. @Mike i disagree that left and right are structual - it is presentational as the structure of html is simply top to bottom. There are some cases where presentational classes are required.

41. Joseph R. B. Taylor
    March 12, 2008

    There's always someone who love to extol the values of completely proper markup. My markup is clean minus the occasional div that performs different clearing tasks. I use 3 classes in my global stylesheet: clear, clear-left and clear-right. I should be obvious what they do. When the day arrives that I don't have to force clear floats in such a haphazard manner I'll be happy to climb on the soapbox myself.

42. Darryl
    March 12, 2008

    Assuming you are already setting font-size in ems, I use the following to keep the size inheritance within nested lists (that is, to prevent any compounding size changes of nested items) : ul ul, ul ol, ol ol, ol ul, ul p, ol p {font-size:1em;}

43. fwolf
    March 12, 2008

    a better approach to short-hand text-alignment and floats are the ones I normally use: <code> .tx-l { text-align: left; } .tx-c { text-align: center, } .tx-r { text-align: right; }</code> <strong>tx</strong> can be easily identified as derived from the word <strong>t</strong>e<strong>x</strong>t. <code> .flt-l { float: left; } .flt-r { float: right; } </code> <strong>flt</strong> as in <strong>fl</strong>oa<strong>t</strong> ;-) cu, w0lf.

44. Steph
    March 13, 2008

    white-space:nowrap; ^ That's just...nifty. Just helped me out on a friends project today!

45. autoapproved
    March 13, 2008

    Re: #8 - I was surprised that this wasn't mentioned, but you usually want to remove the online because you have redefined further down. Removing it completely (as others have already pointed out) is an accessibility problem. Not to mention the times that my wireless mouse dies and I browse the Internet in keyboard-only mode! :)

46. glove
    March 13, 2008

    i have a jump menu's width controlled using CSS.. in firefox, any item that's longer than the menu will be shown, but in IE6, it forces the width, regardless if the item's width is longer than the menu.. is there a workaround for this in CSS?

47. Mel
    March 13, 2008

    @Brian style img with a default style (say float:left) than make a class called alt and style it with the alternative style (float:right), that would be far more semantically correct. Most of the time i also find classes named left and right to be unnecessary, occasionally they might be but i'll only resort to them when absolutely necessary, usually i try find a more semantic approach for markup and class names. However this is more personally approach and as long us the markup is clean and easy to interpret than its fine. I agree a clear class(es) is defiantly a necessary evil that we must use at times, though i prefer to clear on the (content) container below if possible this is not always possible, you may not have a container below your floated elements or it may simply just not work the way you want therefore making <div class="clear"></div> necessary.

48. Harry
    March 13, 2008

    Hi, An nice set of suggestions.......but novices like me can learn even more by watching the debate about the relative merits of the various ideas people propose.

49. Jeff
    March 14, 2008

    @Mel - How is a class of alt for changing float (alignment) a more semantically correct example? Albeit intuitive and a sharp way to do things I do not see how that is "better" than .right or .left for content area pictures.

50. Mel
    March 14, 2008

    @jeff I guess it just depends on what you are doing, this is the approach i tend to use when alternating styles, my reason being is i probably wouldn't put the class on the image itself but the containing div as i may have other styles within the div alternating also. Like i said its just my personal approach, I rarely find it necessary myself for .right and .left (sometimes i do use them). One area where i may have a .right and .left class on images is if i am not necessarily alternating but just randomly floating left or right throughout content.

51. tedd
    March 14, 2008

    Nice tips. Nice presentation. I like using variables in my css, those interested can read about it here: http://sperling.com/examples/pcss/ Question -- why not validate your article? tedd

52. optimas
    March 14, 2008

    Some good info on here - for the beginner! With a nice question from Tedd might I add. And the answer?? regards

53. David Hucklesby
    March 15, 2008

    Bjarni Wark suggested "img { display: block }" to remove the gap under images. Another suggestion is "img { vertical-align: bottom; }" - Useful for situations where display: block; is not convenient.

54. Bono
    March 15, 2008

    Avoid duplication of margins of floats elements in IE6 selector {display: inline;} regards!

55. Jose M Estrada
    March 17, 2008

    Set position as "relative" to any element with borders and/or images as background to allow IE6 shows them properly. Example: h2 { position: relative; border-bottom: 3px solid #ccc; background: url(image_folder/background_image.jpg) no-repeat; } By setting relative position you will fix the bug in IE6 that makes background images and borders to disappear while scrolling up and down the Web document. We used to set a fixed height to avoid this problem in IE6, but We just noticed that the problem is solved just by position the element as "relative".

56. Mat
    March 17, 2008

    Hi there Just wondering with #4 (Always show Firefox scrollbar). Have any of you tried this and then resizing your browser's width less than your design. When I do on a design that has this css line included the horizontal scrollbars do not appear? Is this just me ? I know we don't normally test this as designers we're used to big wide screens and high resolutions ;)

57. Mike
    March 17, 2008

    >> Start every stylesheet with * {margin: 0; padding: 0} No, no no no no. This resets form-based styles and makes them *unsettable* through css. Bad. BAD!

58. Nix
    March 17, 2008

    Great tips! Luv them. Keep it going.

59. Vall
    March 17, 2008

    Thank you for the tips. :) Some are very, very useful. I included a link to this article on my blog in "5 great design articles on the web…". Cheers!

60. allen plumber
    March 20, 2008

    I’ve never really played with the CSS overflow property, partly because I don’t trust it to work in a decent number of browsers.

61. Terra
    March 23, 2008

    overflow:-moz-scrollbars-vertical; ... this should not be used as it disables the horizontal scroll-bar. The definition of this command is: -moz-scrollbars-vertical: Indicates that vertical scrollbars should always appear and horizontal scrollbars should never appear. For more information, please see the Mozilla website: http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions#overflow The use of this command is therefore not recommended, as you cannot guarantee that horizontal browsing is never needed. Even with narrow sites, users may have their browsers not set at max resolution, thereby needing the horizontal scrollbar. Plus, given how this advice is presented (not just in this article but I've seen this on many other sites), web developers may not be aware of the impact on the horizontal scrollbar & the resulting problems.

62. Rob Knight
    March 24, 2008

    With regards to the last tip: If you are going to remove the <strong>:active</strong> pseudo-class border, for accessibility reasons, please use <strong>:focus</strong> along with <strong>:hover</strong> so users navigating via keyboard can see links as they tab to them. Not indicating to the user where they are on the page when tabbing is a big no-no. I say this because this is how I navigate page links and it is rustrating to not know what link has focus on a page.

63. Kyle Meyer
    March 25, 2008

    <i>Start every stylesheet with * {margin: 0; padding: 0}</i> No. That will badly distort select elements, you should never use a wildcard selector to do a browser reset. Instead, you should use a more thorough reset that won't do any damage such as <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">Eric Meyer's Reset</a>.

64. toomo
    March 26, 2008

    erase blue border when apply <a> tag to <img> img { border: none; }

65. max
    March 31, 2008

    really cool list, just bookmarked! ;)

66. aj
    April 1, 2008

    hi, thanks for this useful tip.

67. Tetris
    April 2, 2008

    *Regarding Example #1 I am trying to do a vertical align on a dynamic content where it can sometimes be just one line of copy (like this example), but in some instances I have a second line of text under neath. How can you achieve this vertical align effect with the scenario given? Hope someone can help me~ Thanks

68. todotutoriales.es
    April 3, 2008

    a { outline: 0; }

69. BabyBusiness
    April 4, 2008

    That's a great list baby! I've struggled with floats and margins for a long time, but you just gave me the answers to work with. Great comments too :)

70. Ralph
    April 4, 2008

    Great... There are no 8 Premium One Line CSS Tips, but extremly more in the comments ;) Especially in the comments i get much good ideas to think about the topic of cssglobe. Ralph

71. Jill
    May 5, 2008

    that was a helpful hint in solving the problem...

72. Ivo
    May 25, 2008

    Just great article, some of the stuffs I knew about, but man lots of them were unknown to me... thanks a bunch !

73. Orides Tomkiel
    May 28, 2008

    very nice and useful thank you

74. Alfred Yok
    June 14, 2008

    I honestly thought that I would find anything I already use, but you've posted up some tricks I didn't know..

75. hovvers
    June 19, 2008

    Really cool list, just bookmarked!

76. hindinf
    June 19, 2008

    is used in all my style sheets to prevent any linked images from displaying those ugly borders.

77. sannyc
    June 19, 2008

    hi, thanks for this useful tip.

78. Firebubble Design
    July 27, 2008

    Thanks for number 2 + 3 I have had problems with both of these before.

79. Your Seo Firm
    July 30, 2008

    6. Remove vertical textarea scrollbar in IE Thanks for this one!!

80. Felix
    August 13, 2008

    Brilliant post, many i knew before this but some are new to me. greetz

81. Felix
    August 14, 2008

    Brilliant lines i didn't know #3 thanks 4 it... greetz

82. Stephen Cronin
    August 14, 2008

    <blockquote>Start every stylesheet with * {margin: 0; padding: 0}</blockquote> Several people have mentioned Eric Meyer's CSS Reset. Another good alternative is Yahoo's CSS Reset (http://developer.yahoo.com/yui/reset/).

83. mystery design
    August 19, 2008

    Margin 0 auto, a classic , you wouldn't believe how much i use this css rule. My company loves me to center my designs, their mad for it!!

84. Oak Garden
    August 19, 2008

    Simple , informative and helpful. Its what blogging is all about. thanks for the tips. You can use overflow: to display backgrounds when you dont define a height.

85. water
    August 27, 2008

    "use line-height property to vertically center the content" not always effective in different browser(try FireFox 3)

86. voyance
    August 27, 2008

    Useful for situations where display: block; is not convenient.

87. Steve Clifford
    September 13, 2008

    Thanks you very much, really useful!

88. Jon
    October 31, 2008

    #2 is the most ridiculous thing I've seen all day... this is the internet, where content is king. If your content breaks your layout, you didn't design your layout very well in the first place... but the important thing is that the user can still read your content. People come to your website for the information you're offering them, not to gawp in appreciation at how well your DIVs line up and how the padding gives it that certain aesthetic glow.

89. Synergy Informatics
    December 15, 2008

    Your tips for Css are really wonderful... informative & helpful... thanks for these useful tips...

90. cherooo
    January 31, 2009

    css excellent presentation, you've done a good job thank you very much

91. Zoran
    March 16, 2009

    Good work! Your post/article is an excellent example of why I keep comming back to read your excellent quality content that is forever updated. Thank you!<a href="http://www.roulettesystemwinner.com" title="roulette online"><img src="http://www.roulettesystemwinner.com/img/roulette online" alt="roulette online" border="0"></a><a href="http://www.poker-mastery.com" title="poker sites"><img src="http://www.poker-mastery.com/images/poker sites" alt="poker sites" border="0"></a><a href="http://www.blackjack21onlinestrategy.com" title="blackjack online"><img src="http://www.blackjack21onlinestrategy.com/images/blackjack online" alt="blackjack online" border="0"></a><a href="http://www.win-online-video-poker.com" title="video poker online"><img src="http://www.win-online-video-poker.com/files/video poker online" alt="video poker online" border="0"></a><a href="http://www.mymovie-downloads.com" title="divx movie downloads"><img src="http://www.mymovie-downloads.com/images/divx movie downloads" alt="divx movie downloads" border="0"></a>

92. E11World
    March 23, 2009

    Nice tips. Some new ones for me.. I'd like to add this one (I didn't make it up) but it doesn't follow standards for the most part) margin: 0; Firefox *margin: 0; IE7 _margin: 0; IE6 Could be used for any value as well and it works like a charm.

93. Tim Wright
    March 24, 2009

    @hasan putting a block level element inside an inline is invalid markup (not "invalid", but you're not suppose to do it). one of my favorites: label, button {cursor:pointer;}

94. Scarf*oo
    March 29, 2009

    Apart from cross-browser issues, the line-height trick would only be good if the content is a one-liner. nice tips btw.

95. Rahul
    April 21, 2009

    Wow really simple and effective solution.

96. Rioserver
    April 29, 2009

    dissapear blue border when apply <a> tag to <img> img { border: none; }

Sorry, the comment form is closed at this time.