I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page.
However, I would like to change the layout so that the items are shown as 3 in a row from left to right, and then go top to bottom.
The function looks like this:
function createSidebarEntry(marker, name, address, city, state, zipcode, telephone, images, url) {
var div = document.createElement('div');
var html = "<p><a href='http://" + url + "'>" + name + "</a><br/>" + address + "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + (formatPhone(telephone)) + "</p>";
div.innerHTML = html;
div.style.marginBottom = '5px';
return div;
}
Also, I'm wondering if using tables would be a better approach for this task? I've tried styling the DIV like this:
#sidebar {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width:665px;
font-size:10pt;
font-family:Arial;
color:#656668;
display: table-cell;
}
Unfortunately, despite playing around with margins and other properties, I haven't been successful. Has anyone successfully formatted dynamic data into three columns using CSS within a DIV container? I've searched online but couldn't find a solution that works for me.