Question

I’m working on a template for a product.

The basic idea is to have the product number completely to the right, have the picture completely to the left, and have the description box touch the bottom of the product number from the top and touch the rightmost extent of the picture to its left.

The number and picture are in the right place. The product description however is not where I intend it to be.

Here is a picture of it:

and here is the html:

<div id="product">
    <div class="productNumber">#425</div>
    <div id="cont">
        <div class="productPictureA">
            <img src="images/mahogFront.png" alt="some_text"/> 
        </div>
        <div class="productDesc">Product descriptionProduct 
                descriptionProduct descriptionProduct description
        </div>
    </div>
</div>

And these are the styles:

#product {
    background-color: #42533E;
    width: 650px;
}
.productNumber {
    padding: 4px;
    font-size: 35px;
    color: #FF0000;
    float: right;
}

.productPictureA
{
    float: left;
    padding: 0px;
    margin: 10px;
}
.productDesc{
    background-color: #00FFFF;
    color: #FFFF00;
    font-size: x-large;
}

What exactly do I need to do to acheive the aforementioned result?

Thanks

Answer 1

From what I understand of your question, you would have to set a width for the image(.productPictureA), and a width for your description(.productDesc), and float .productDesc left. To get it offset from the top you would just need to add a margin-top to it.