html - Clearing floats dynamically with CSS -


i'm trying create 3-column blog layout in css. each new post, there new div added dynamically inside of container div.

however, i'm running trouble clearing floats since can't place clear element manually.

here's looks now: http://jsfiddle.net/dzasd/

and here's want like: http://jsfiddle.net/dzasd/1/

i want able without manually placing <div style="clear:both;"> after 3rd div. there way selectively clear floating elements after every 3rd div, if there potentially infinite divs added?

thanks!

you can use css selector nth-child apply clear each third element.

css

.box:nth-child(3n + 1) {     clear: both; } 

demo

how nth-child works

note: nth-child not supported ie8 , less.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -