ansaurus

Question

How can I css for List/grid in div with border?

Answer 1

+2 A:

Ok, so I got it to work - you need to set a specific height on the .list_column class: (I added a DOCTYPE and your CSS/INLINE styles are slightly better formed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<style type="text/css">
.list_container{
    float:left;
    width: 548px;
    margin-bottom:10px;
    font-family: vardana;
    border: 1px #9F9F9F solid;
}

.list_row{
    float:left;
    width: 548px;
    border-bottom:1px #9F9F9F solid;
}
.list_row:hover{
    background-color:#CCCCCC;
}
.list_rowHeader{
    float:left;
    width: 548px;
    font-weight: bold;
    background-color: #FF0000;
    color: #FFFFFF;
}
.list_column{
    float:left;
    width: 250px;
    /* height: 50px; /* Need a height - UNCOMMENT */
    /* min-height: 50px; /* Need a height - UNCOMMENT  */
    padding-left: 3px;
    padding-right: 3px;
    border-right: 1px #9F9F9F solid;
}

.list_columnLast{
    float:left;
    padding: 3px;
    width: 180px;
} 

.even{ background-color:#E0E0E0!important;}
.odd{ background-color:#FFFFFF!important; }
</style>
</head>

<body>      
    <div class="list_container">
        <div class="list_rowHeader">
            <div class="list_column">Name</div>
            <div class="list_column" style="width: 96px;"> Bid Amount</div>
            <div class="list_columnLast"> Email </div>
        </div> 
        <div class="list_row even">
            <div class="list_column">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> [email protected]</div>
        </div> 
        <div class="list_row odd">
            <div class="list_column">Saidul Haque, Sonargaon, Bangladesh Dhaka,</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> [email protected]</div>
        </div>
        <div class="list_row even">
            <div class="list_column">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> [email protected]</div>
        </div>
    </div>
</body>

I hope that helps! ^_^ <(Enjoi)

Neurofluxation 2010-05-20 09:03:50

Thanks for your answer.Same Problem in this code. Suppose when content height exit 50 then show same problem

Saidul Haque Nayan 2010-05-21 06:49:47

Had you uncommented the "Height" lines in the .list-column section?

Neurofluxation 2010-05-21 08:09:47

ansaurus

tags:

views:

answers:

How can I css for List/grid in div with border?

related questions