Using Javascript and CSS to align left to right

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.

---

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.

---

I would suggest creating your elements with jquery. It's alot easier and more elegant.

But the root of you issue is that you need to add a float:left; style to your div. This will put all your divs in the same row.

Oh, and try to use tables as little as possible to layout out elements on your page. Divs and CSS are the way to go.