css border not showing on top of each element

Question

I have just started with web development. I wish to keep a border on top of my every product row. Something like:

---

product image product description

---

image description

---

. .

However my border is seen only on top of the first block. Kindly help.

Below is the CSS & html I have attempted

.prdDes
{
    width:82%;
    float:right;
    padding-top:5px;
}

.prdDet
{
    border-top-color:#ddd;
    border-top-style:dashed;
    border-top-width:1px; 
}

<div class="prdDet">
    <img src="images/profile/0.png" class="productimg" />
    <div class="prdDes">
        <h3>Product 1</h3>

        <p>Details about the product1. Specifications etc.</p>
        <ul>
            <li>Spec1</li>
            <li>Spec2</li>
            <li>Spec3</li>
            <li>Spec4</li>
        </ul>
    </div>
</div>
<div class="prdDet">
    <img src="images/profile/14.png" class="productimg" />
    <div class="prdDes">
        <h3>Product 2</h3>

        <p>Details about the product2. Specifications etc.</p>
        <ul>
            <li>Spec1</li>
            <li>Spec2</li>
            <li>Spec3</li>
            <li>Spec4</li>
        </ul>
    </div>
</div>

Answer 1

Add

overflow: auto;

to .prdDet class style. Here is an example: http://jsfiddle.net/dvFqn/

Why is it necessary to add that style? Because .prdDes has float set to left it is somehow taken away from standard document flow, so it's parent .prdDet does not set it's height/width to its content. Setting overflow: auto fixes that behavior and makes .prdDet as high and wide as its content, what is a desired behavior in that situation.

Answer 2

you have used float:right; in your prdDes class. this mean that the elements would float out of the div they are contained in unless their parent div is not floating as well. so for the prdDet class you must use float:left;... this would solve your problem.