Question

I am working with my jsp and some jQuery and I would like to create a list/ grid of buttons. The index of divs represents one of the items I am storing in session. Not the best idea, but it is the route I am choosing to take. I am planning to use the script below to figure out which div has been clicked. I took it from the jQuery site.

$("div").click(function () {
    var index = $("div").index(this);
    //ajax work here
});

I want this list to be in a grid 2 columns wide. If I used span to encapsulate every 2 divs, what would I have to change in order for it to work? It isn’t doing much for me now? Or is it better to use table tags?

Answer 1

Use an unordered list as a wrapper:

<ul>
     <li>....col1...</li>
     <li>....col2...</li>
     <li>....col1...</li>
     <li>....col2...</li>
</ul>

Then format your list so that you float the list items in a wrapper that is twice as wide:

ul, li {list-style:none;margin:0;padding:0}
ul {width:400px}
li {float:left;width:200px}