Tip 1

HTML

<div id="outer">
	<div id="inner">
		<p>big floating contents</p>
	</div>
	<p>Main Content</p>
</div>

CSS

#outer {
overflow: auto;
height: 1%; /* for IE6 */
}

Tip 2

HTML

<div class="clearfix">
	<div class="floater">This text won't extend past the bottom of the "clearfix" div.</div>
</div>

CSS

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE5/Mac \*/
* html .clearfix {
height: 1px;
}
.clearfix {
display: block;
}
/* End hide from IE5/Mac */

Tip 3

HTML

<div class="spacer"></div>

CSS

div.spacer {
clear: both;
}

Tip 4

HTML

<br />

CSS

br {
clear: both;
height:0;
font-size: 1px;
line-height: 0;
}

Tip 5

HTML

<div class="newBFC">
	<div class="floater">
	This text won't extend past the bottom of the "newBFC" div.
	</div>
</div>

CSS

.newBFC {
overflow: hidden;
_overflow: visible; /* not valid */
_overflow-x:hidden; /* not valid */
_height: 0; /* not valid */
}
/*\*//*/
.newBFC {display: inline-block;}
/**/

CSS lang

color: #FFFFFF
color: #6699FF
color: #990000

CSS shorthand

color: #FFF
color: #69F
color: #900

#FFFFFF wordt #FFF
#990000 wordt #900
#6633FF wordt #63F
#00FF99 wordt #0F9

CSS lang

border-width: 1px;
border-color: black;
border-style: solid;

CSS shorthand

border: 1px black solid;

Aparte eigenschappen

CSS lang

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

border-right: 1px black solid

Natuurlijk geldt dezelfde regel ook voor border-bottom, border-top en border-left:

Hierbij zijn verschillende mogelijkheden, naargelang het aantal dezelfde waarden die worden gebruikt bij margin & padding.

CSS lang

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

CSS shorthand

margin: 2px 1px 3px 4px; /*top, right, bottom, left*/

Als één of meerdere waarden hetzelfde zijn, kan je deze ook weer inkorten:

3 waarden

CSS lang

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;

CSS shorthand

margin: 5em 1em 3em; /*top, right & left, bottom*/

2 waarden

CSS lang

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;

CSS shorthand

margin: 5% 1%; /*top & bottom, right & left*/

1 waarde

CSS lang

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

CSS shorthand

margin: 0; /*top & bottom & right & left*/

CSS lang

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

CSS shorthand

list-style: disc outside url(image.gif)

Als je ook maar een van deze waarden niet meegeeft zal elke browser dezelfde standaard waarden toekennen, dat zou dan altijd achtergrondkleur wit, een eventuele afbeelding zal zichzelf herhalen horizontaal en vertikaal, positie van de afbeelding zal altijd top left zijn.

CSS lang

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

CSS shorthand

background: #fff url(image.gif) no-repeat top left