floated divs sometimes doesn’t fit

[warnew]

I’ve some floated divs int the middle of this page: http://nimfa.hu/. Sometimes there is only one div in a row, it’s supposed to be 2.

the div looks like this:

Code:

Joan Sloncewski

ELÍZIUM LÁNYA

Metropolis Media, 2008

Kedvezményes ár:

2450 Ft

There is a php wich makes sure, the cover image is always 100px wide.

with the css:

Code:

.book {
float : left;
width : 300px;
font-family : Verdana;
font-size : 10px;
line-height : 12px;
background-color : #f1f1e7;
background-image : url(‘/images/bookdivbg.png’);
background-repeat : repeat-x;
height : 190px;
overflow : hidden;
}
.price {
color : #eb4703;
font-weight : bold;
font-family : Verdana;
font-size : 10px;
line-height : 12px;
}

.book h1 {
font-family : Georgia;
font-weight : bold;
font-size : 11px;
line-height : 13px;
color : #0881c6;
}

.book a {
text-decoration : none;
}

.book h2 {
font-size : 10px;
line-height : 13px;
font-family : Verdana;
font-weight : bold;
margin-top : 10px;
}

.book .cover {
border : 1px solid black;
float : left;
margin : 10px;
}

how can i be sure, there are always two div in a row?

[Jonz]

You have it (booklist) displaying as a table but haven’t assigned any cells. Just use the floats you don’t really need to display in a tabular form just use the floats.

[warnew]

i don’t really see the connection, but it seem’s to work, so wo cares ;)

(i used to use the display: table; to avoid the parent div’s collapse with only floating elements.)

thanks

[Author]

Posts