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
Post a Comment