div element does not act like a block when specified

Question

Ok I have 2 problems with my aligning.

first of all, 2 borders to the left of my div are being created, and I don't get why that is. I only want one border to be created. And the width is 1px, so it shouldn't act like that ?

The second problem is that the purple div (there are 2 at bottom), which I didn't include in this pic but it is basically a div with this class:

.reviewsContent {
    clear:both;
    display: block;
    margin:0;
    padding:0;
    margin-left: 25px;
    background-color: purple;
}

This div ( purple) should not not overlap with the blue div as it is a block, but it does..

Thanks !

larger picture here

this is the html code

<div class="productWrapper">
        <div class="productName">LG 6.3 Cu. Ft. Self-Clean Smooth Top Range <br> <span class="categoryText">Dishwashers</span></div>
        <div class="productContent">
            <div class="subtitleText">Product Description</div>
            <p class="productText">
                some product descrip tion some product descrip tion some product descrip tion some product descrip tion some product descrip tion 
                some product descrip tion some product descrip tion some product descrip tion
            </p>
            <div class="subtitleText">Product Details</div>
            <p class="productText">
                Width: <br>
                Height: <br>
                Weights: <br>

            </p>
        </div>

        <div class="productImage">
            <img class='productImage' src='images/c000002.jpg'>
            <div class="productImageInfo">In-stock: 10 ................................... ADD CART BUTTON</div>
        </div>

        <div class="reviewsContent">Reviawe fawe a..</div>
        <div class="reviewsContent">Reviews..</div>
    </div>

and this is the css sheet

.productWrapper {
    /*background-color: red;*/
    margin:0;
    padding:0;
    /*height:1000px;*/
    margin-left: 230px;
    padding-top:10px;
    /*font-family: "Open Sans",Verdana,sans-serif;*/
    font-family: calibri;
    color: #000000;
}

.productName {
    font-size: 24px;
    //font-size: 22px;
    margin:0;
    padding:0;
    margin-left:25px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: #444444;
    /*background-color:green;*/
    border-bottom: 1px solid;
    border-color: #E4E4E4;
}

.productContent {
    display: inline-block;
    vertical-align: top;
    background-color:gray;
    margin:0;
    padding:0;
    margin-left:25px;
    width: 350px;
    border: none;
}

.productImage {
    display: inline-block;
    vertical-align: top;
    width: 330px;
    max-width: 330px;
    height: 330px;
    max-height: 360px;
    padding:0;
    margin:0;
    padding-left: 8px;
    border-left: 1px solid;
    border-color: #E4E4E4;
    /*float: right;
    //padding-left: 5px;
    background-color:blue;*/
}

.productImage img {
    display: inline-block;
    margin:0;
    padding:0;
    /*float:right;*/
    /*background-color:blue;*/
}

.productImageInfo {
    display: block;
    margin:0;
    padding:0;
    padding-left: 8px;
    margin-right: 8px;
    background-color: blue;
    width: auto;
}

.reviewsContent {
    clear:both;
    display: block;
    margin:0;
    padding:0;
    margin-left: 25px;
    background-color: purple;
}

Answer 1

From what I see there are two things wrong with this so far:

First you have applied the productImage class to botht the div and the img tags. This is why you have two borders. The div gets one and the img gets another from the productImage class.

The reason why the divs do not seem to be clearing each other is because of where they are in the DOM.

The review divs are in fact clearing the productImage div, but you explicitly gave it a height that is not large enough to contain your image and your info. Since the info is inside the productImage div, it is not cleared because it is not considered when the reviews are laid out, I think.

If you increase the height of the productImage class to 380px and you take the productImage class off of the div, then I think you get exactly what you want.

Bear in mind there is still a bit of a visual break where the image sits because the background of the image is white and the background of the page is grey, but the border is gone.