• snippets
  • all/
  • popular/
  • yours
• gigs
• developer
• blog
• about

• Big /
• Small

We Recommend

Posted By

travis on 06/29/06

Tagged

css clear float

Versions (?)

06/29/06 02:00pm

Who likes this?

131 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
loopdream
jonrandy
esquareda
jfherring
dvdrtrgn
titox
poGDI
superdeluxesam
jero
andyweb
crisb
ascarion
ilumin
LostCore
justinscheetz
VaiT
Hilyin
rubenrails
tobiasmay
dzone
yuindustries
brother_maynard
mori
thinkcirca
elbuenob
ntulip
enajenkins
Bluewall
Boulder
owais
geothen
dardanmex
nreliu
shali
bakin9
nirva
ikimozu
delarge
l1r
aceweb
endorfin
hamiltonmascioli
fragmentist
jmacgr
darkapple
nb109
deanburge
umang_nine

Published in: CSS 

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

Posted By: jadedbat on December 3, 2008

Love it.

Posted By: AlexWolfe on December 29, 2008

I don't believe IE6 supports the psuedo class :after with the insertion of "content: '.' " Please check this in IE6 before using it.

Posted By: ilumin on January 6, 2009

it WORK on IE6 thx alot.

Posted By: deepdown on January 28, 2009

just use an overflow and 'hack' the height for IE:

.clearfix {overflow: auto; _height: 1%;}

Posted By: jstnjns on February 13, 2009

I would actually recommend not using any hacks, as clearing can be totally achieved without any special classes OR hacks.

divtryingto_expand {

height: auto; overflow: auto; }

There are a few places where this method doesn't work: 1. when a child within this parent div is absolutely positioned outside of the border of the parent div 2. if a child within this parent div has a floated child that is not being cleared, and causes the child of the child to extend outside of the parent div

Hope this helps!

Posted By: jaspertandy on April 13, 2009

if you're just trying to clear floats, I define the following:

/it's normally a good idea to wrap two floats, as semantically you could argue they're associated anyway/ .wrap { overflow:hidden; width: 100%; /important to define a width - the simple .class allows for easy overwrite/ } simple.

Posted By: Triconium on April 22, 2009

While this does work in some circumstances, there are some instances involving more complex markup that it will not work with. Due to these inconsistencies, I prefer to stick with the tried-and-true method of using clear divs.

Neat snippet, though.

Posted By: frujo on April 29, 2009

This code was clearly explained in "CSS Mastery" book by Andy Budd and Cameron Moll.