Reputation: 13915
I need DIV
blocks which have some data. Due to different content, blocks have variable height. I need to align div blocks by two. Because of the different height of blocks there is "free space" remaining. How to align these blocks so it would be aligned properly?
The data comes from JSON reques so making table seems : 1. more tricky to make grid using JS (2 elements in a row) 2. Obsolete (?) . What would you recommend?
CSS:
.book-details{
float:left;
display:block;
border-style:solid;
border-width:1px;
padding: 2px 2px 2px 2px;
border-color:gray;
width: 450px;
display: table;
}
PIC:
Upvotes: 0
Views: 77
Reputation: 1636
IE7 and below doesn't get display:table, for IE8, you have to use the html5 doctype, ie 9 will work.
Better to avoid it and just float. Remember your box model. Your width is actually 456px so what's the parents' width?
And, you should clear the float after two if you're just doing 2x across.
You could just set a height that will be tall enough for the longest div. What you're pulling in seems to be easy enough to estimate.
Upvotes: 2