Grow your CSS skills. Land your dream job.

floated divs sometimes doesn’t fit

  • # November 21, 2008 at 11:58 am

    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?

    # November 21, 2008 at 7:15 pm

    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.

    # November 21, 2008 at 8:51 pm

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".