Garrick Cheung » best practice

CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)

Garrick — Mon, 08 Dec 2008 01:00:21 +0000

I know you’ve done it before. I think we’ve all done it. You have a container with a floated element inside. The container doesn’t wrap around everything, thus causing the element to break outside of the container. To fix this, we’d usually add a clear element at the bottom of the container so it would wrap everything within. But there is a better solution, which uses two CSS properties. For this example, I’ll place the styles inline.. please don’t hate me.

If you want to just get to the better solution…

The Example


    
    Text inside the container div.

Proceeding with the example, div.clear is placed at the bottom of div.container, which solves the problem. Div.container’s border now wraps all the elements within.


    
    Text inside the container div.

The Better Solution

But why should we even bother placing an extra element? It’s not sexy. Here’s the solution: Use height:1% or width:100% and overflow:auto||hidden on div.container. Height and width on div.container would set the hasLayout property in IE, thus fixing a slew of float/box-model bugs (more on hasLayout). Overflow auto or hidden tells div.container to wrap everything within it.

Note: This won’t work if the element is floated, which would cause it to shrink to the percentage height or width.

The HTML


    
    Text inside the container div.

The CSS

1	div.container {height:1%; overflow:hidden;}

CSS Best Practice #2: Shorthand Properties

Garrick — Fri, 05 Dec 2008 19:00:30 +0000

Write your CSS rules with shorthand properties. It keeps things simple and clean.

.example {
    /* long */
    padding-top:1px;
    padding-right:2px;
    padding-bottom:3px;
    padding-left:4px;
 
    /* short */
    padding:1px 2px 3px 4px;
}

To help you with the shorthand, Dustin Diaz took the time to put together a CSS shorthand guide. Way to go Dustin! Check the guide for in-depth descriptions, examples, and Dustins “quirky facts” (such as shorthand defaults).

SitePoint CSS Reference is another source for shorthand properties, or any property in general, you should/could/would use.

CSS Best Practice #1: Reset CSS

Garrick — Sun, 30 Nov 2008 13:01:25 +0000

I think resetting browser styles is important. You’ll never know what you’re dealing with. If all the browsers start on the same page it will make your life easier because you’ll know what to expect. I personally use Eric Meyer’s Reset CSS as a base and modify it as needed.

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Other Resets

There are actually a lot more choices besides Eric Meyers. I found several more at a post on Pinceladas da Web. It is in Portuguese so you may need to translate.

CSS Best Practices: Index

Garrick — Sun, 30 Nov 2008 13:00:52 +0000

I’ve decided to create an index of all the CSS best practices in this post that will be updated when I add a new best practice. It should be easier for you to keep track of everything. Please bear with me while I get things together.