Question

I have this line of javascript which creates a listing of store locations, and creates a DIV beneath the map. The items are displayed on the page top to bottom.

I would like to display the items as 3 in a row, left to right, top to bottom.

The function is 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;
}

As a side bar question, would tables be the preferred method?
I have tried to set the DIV as:

#sidebar {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width:665px;
    font-size:10pt;
    font-family:Arial;
    color:#656668;
    display: table-cell;
}

And unfortunately after working with margins, etc, I have seemed to run out of luck. Has anyone been able to use dynamic returned data and apply formatting with CSS in three columns? I have been googling and everything I see points me to creating three column styles within my DIV container.

Answer 1

try setting the parent element with a fixed width and apply float to the childs and a width of 33% for them. Don’t forget to use a clear afterwards.