css - Javascript for breaks in multi-column layout -



css - Javascript for breaks in multi-column layout -

i'm using multi-column css in fixed height element browser creates many columns needs contain content. new columns appear right of other columns, break after 3 columns , have columns 4,5,6 appear below 1,2,3. imagine can done js, don't know select. thanks, here's code:

.columns { width: 360px; font-size: 100%; text-align: justify; height: 300px; display: block; padding-bottom: 30px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-width: 100px; -webkit-column-width: 1000px; -moz-column-gap: 40px; -webkit-column-gap: 40px; } <div class="columns"><p>lorem ipsum.../p></div>

you set columned element in container width need , overflow:hidden. utilize javascript clone columned element, set clone in container (directly after original) , give clone either margin-left: -100% or relative positioning.

javascript css css3 multiple-columns

Comments

Popular posts from this blog

iphone - Dismissing a UIAlertView -

intellij idea - Update external libraries with intelij and java -

javascript - send data from a new window to previous window in php -