CODEWITHSUNDEEP
htmlcss
J.Olufsen
J.Olufsen

Reputation: 13915

How to align div blocks to be aligned in grid?

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: enter image description here

Upvotes: 0

Views: 77

Answers (1)

kelly johnson
kelly johnson

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

Related Questions