How to create a 2 column design? When the data display is full on the first column, it will automatically display on the second column?
the restriction is I cannot set a limit for the data since they are dynamic, means sometimes got 20 posts of data, but sometimes only got 2 posts. All the data have to be evenly split into 2 columns, vertically, as you can see, like the red counter text on the images attached below.
Thanks
Two options - use them depending on your user's browser support.
Floats: Float the list items while giving them half the width of the parent ol. The code will look something like:
ol {
width: 400px;
}
ol li {
width: 190px;
margin-right: 10px;
float: left;
}
Columns: Use the new CSS3 columns property to get the columns. Remember that only Webkit, Mozilla and Opera browsers supports this; IE as of 9 beta does not have this yet. The code will look something like:
ol {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
Note that the two does not produce the exact same results. You may also want to consider using a script such as Modernizr to detect support for CSS3 columns before using it and supplying a fallback for older browsers that do not.
See a working example here: http://jsfiddle.net/sVEE5/
Corrected according to @Yi Jiang's suggestions. Old version below
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<style type="text/css">
ul { width: 100px; float: left; border: 1px solid red; }
</style>
<script type="text/javascript">
$(window).load(function(){
var firstCol = $('#first'),
secondCol = $('#second');
while(firstCol.height() < secondCol.height()){
firstCol.append(secondCol.children().first());
}
});
</script>
</head>
<body>
<ul id="first">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
<li>Content 5</li>
<li>Content 6</li>
<li>Content 7</li>
<li>Content 8</li>
<li>Content 9</li></ul>
<ul id="second"></ul>
</body></html>
If you fill col1 and then move elements to col2. With an odd amount of elements this makes col2 taller, which is why I do it backwards
this should be compatible even with old browsers
<html>
<head>
<style>
#col1, #col2 { border: 1px solid red; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready( function() {
var c1 = $('#col1')[0];
var c2 = $('#col2')[0];
while (c1.clientHeight < c2.clientHeight) {
var elm = $('#col2 *:last')[0];
c1.innerHTML = elm.outerHTML + c1.innerHTML;
elm.outerHTML='';
}
} );
</script>
</head>
<body>
<div id="col1">
</div>
<div id="col2">
<div>content01</div>
<div>content02</div>
<div>content03</div>
<div>content04</div>
<div>content05</div>
<div>content06</div>
<div>content07</div>
</div>
</body>
</html>