Best method for grid of divs/search results?

I want to have items pulled from a database filling up the page in order like rows of 4 square items.

Is there a standard way to do this with respect to html and css?

could make a series of divs with different position to move them across the page, or could do a table, or some kind of css expression to make everything line-up automatically depending how many items there are. The back end is ruby, but I have nothing to do with its development, just needing to come up with the front-end.

Any advice on best way to code this up? Or some terms that’ll help me google this better :wink:

Can use floaty divs without worry

As I said above you can only use floats if the elements are the same height. If they are not the same height they will snag. The inline-block method will cater for varying heights and is the one I would use.:slight_smile:

ok thanks i’m sure I can do this with that… didn’t want to do any major faux pas lol. Can use floaty divs without worry.
and yeah everything is going to be fixed width, as I mentioned.

oh sorry… yes it’s going to be a fixed layout, so it’d be 4 per row regardless, like how iphones display apps but with more text. but I want to use the same template if possible for different list views. i don’t have much to show yet or else i would put some visual aids up for you, i hope that makes sense.
I don’t know that it’d semantically be a table, but that would still work the way i’m imagining it.

That bestbuy site is using javascript to equalise the column heights (although it will still work without javascript but just not equal).

If you have fixed width and height elements that are all the same you could simply float them and they will wrap nicely and fill the available space.

If the heights are uneven then you will need to use inline-block instead as shown here.

Of course as mentioned above if the data is tabular then a table could be used but then you lose the ability to have fluid rows unlike the css version.

I’m not too sure of what you’re getting at but if it’s a list of results you probably should use a list, <ul>, to markup it up. That would be semantically correct.

It all depends upon the nature of the results and what they represent in a semantic sense, and how they integrate within the search results page.

It may be a TABLE (tabular data) or a DIV but without seeing an example it is rather hard to fathom out what it is supposed to be representing.

For example are the contents of the interrogation; a specific defined - fixed - dimension in the first place? HTML describes structure not presentation and layout.

bestbuy has a fixed layout. is this what you want, or you’re aiming for a fluid layout? or maybe an elastic one? or hybrid? your’s is not a question easy answered if the proper reference system is missing :slight_smile:

Well, I’m thinking basically like how bestbuy shows their results, except not limited to only the first 3, so it would continue on to another row. They use divs, as do most places I have view sourced so I was thinking that must be standard… but wanted to get some kind of expert opinion :stuck_out_tongue:

still not clear enough :slight_smile:

4 per row, yes, but 4/row fixed (4 x 215px) or fluid (4 x 25%) in a fixed page/contaniner width (960px) or fluid (100%) layout?

but regardless, table seems fine if the data is tabular (like a spreadsheet). otherwise use divs, make them float (or display inline), compute their width as a 1/4 of that of the page/container width and they should all self arrange in rows having 4 cols each.