Forums

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:


<div class=\"book\">
  <a title=\"Részletes ismertet?\" href=\"/konyv/2262\"> <img class=\"cover\" src=\"/images/cover/2262/100\"/> </a>
  <h2> Joan Sloncewski </h2>
  <a title=\"Részletes ismertet?\" href=\"/konyv/2262\">
     <h1>ELÍZIUM LÁNYA </h1>
  </a>
  Metropolis Media, <span class=\"year\">2008</span>
  <h3>Kedvezményes ár:</h3><span class=\"price\">2450 Ft</span>
  <div class=\"brief_actions\">
    <a rel=\"nofollow\" onclick=\"loadXML('iss=2262&todo=preadd')\" href=\"\#\"\" title=\"El?jegyzés\">
        <img src=\"/images/design/elojegyzes.png\"/>
     </a>
   </div>
</div>

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

with the css:


.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

treehouse : what would you like to learn today?

Forums

floated divs sometimes doesn't fit