html - How to create a 2 column design where when the first column is full, it will automatically display on the second column? -



html - How to create a 2 column design where when the first column is full, it will automatically display on the second column? -

how create 2 column design? when info display total on first column, automatically display on sec column?

the restriction cannot set limit info since dynamic, means got 20 posts of data, got 2 posts. info have evenly split 2 columns, vertically, can see, reddish counter text on images attached below.

thanks

two options - utilize them depending on user's browser support.

floats: float list items while giving them half width of parent ol. code like:

ol { width: 400px; } ol li { width: 190px; margin-right: 10px; float: left; }

columns: utilize new css3 columns property columns. remember webkit, mozilla , opera browsers supports this; ie of 9 beta not have yet. code like:

ol { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }

note 2 not produce exact same results. may want consider using script such modernizr observe back upwards css3 columns before using , supplying fallback older browsers not.

see working illustration here: http://jsfiddle.net/svee5/

html css

Comments

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -