We Recommend

CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

travis on 06/29/06

Tagged

css clear float

Versions (?)

Who likes this?

85 people have marked this snippet as a favorite

travis
bobbysmith007
xhtmled
luxuryluke
jamesmcoats
pagetoscreen
designerd
alvaroisorna
talaris
splorp
cochambre
postNuKe
fsorbello
sendoa
panatlantica
marc0047
kgosser
nicolaspar
benpjohnson
damarev
enochrisen
rengber
zensir
oronm
vanne
ttscoff
dividespace
mh
gronas
benvallack
block
basicmagic
Sahoglu
koncept
tavo
icarus
nankoweap
mblarsen
SpinZ
Mikker
hollowmyth
manub
Buerogeschwister
fael
rich13
marcio
asimovi
SamuelMiller
aziz
gtalmes
udayrayala
noah
marteki
gasface
Leech
Winkyboy
sp1r1t
willgarrison
tome2k
sangrio
neoprolog
n00ge
johnself
avioli
stphnclysmth
sosof
wbowers
balinuxster
dkypuros
gbot
cczona
jatkins
chill3d
wired
koorb
nilsr
sleggat
stylz
unravelme1
digiloper
heinz1959
pablodgavilan
LeeRJohnson
jonrandy
esquareda

Clear floats without structural markup

Published in: CSS

".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear".

Plain TextExpand

.clearfix
{
	display: inline-table;
/* Hides from IE-mac \*/
	height: 1%;
	display: block;
/* End hide from IE-mac */
}
 
html>body .clearfix
{
	height: auto;
}
 
.clearfix:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Report this snippet

Comments

Subscribe to comments

Posted By: jatkins on March 6, 2008: Aw, I see a hack :(
Posted By: jatkins on March 6, 2008: Although, it's not a real problem, as IE-Mac isn't supported anymore (I think?). No issue.

Comment:

You need to login to post a comment.