Using CSS (see the CSS below) it works fine in all browsers. Unfortunately as expected it does not work within IE 8. Is their an alternative way that I can get similar 3 column output for IE 8?
#site-map .site-map-box {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 250px;
-moz-column-gap: 250px;
column-gap: 250px; }
CSS3 columns are not supprted in IE8. You will be able to do this using divs however this will only be effective if your content is static.
For example:
<div style="overflow:hidden;">
<div style="float:left; width:33%;">first third of content</div>
<div style="float:left; width:33%;">second third of content</div>
<div style="float:left; width:33%;">third third of content</div>
</div>
For dynamic content you will have to use javascript. I've came across this jQuery plugin online - it should do what you need.
$('#mydiv').columnize({ width: 200 , columns: 3 });
usually, as alternative i use for older browser, is to set display:inline-block to childs with the width expected of columns , minus column-gap .
It change the layout going from left to right then, it draws a new line.
I'd rather use display than float, cause float elements can be hooked in middle, where inline-box just break the line and can be vertical-aligned to each other on a line.
If you really need to stack things from top to bottom columns by columns with no gaps , you can either adapt your script server to build your columns or use javascript.
Mansonry javascript could be be what you are looking for : http://masonry.desandro.com/
