How to display product infomation?

[macca11]

---

---

Hi all,

I have a problem, I need to display a product (picture floated left) and to the side of it I need all the information, I don't want to use
's to display this information. So I was thinking a table was the way to go.
Then i thought maybe i should be using a list.

Which is the best method and how'd you display eg;

Product xxxxxxxxx

Dimensions xxx xxx

Price £xxxxx


I've never used a table before

[macca11]

Ok i'm playing with the HTML as we speak and maybe a

would work, making the dt's strong and indenting dd's.

What do you think?

[tr0y]

.img {
    float: left; 
    height: 300px;
    width: 300px;
    background-color: blue;
    margin: 10px;
}

.item {
    float: left;
    height: 320px;
    width: 600px;
}

<div class="item">
            <div class="img"></div> 
            <div class="details">
                <label for="product">Product</label><span id="product">XXXX</span>
                <label for="dimensions">Dimensions</label><span id="dimensions">XXXX</span>
                <label for="price">Price</label><span id="price">XXXX</span>
            </div>
        </div>

[macca11]

Thanks for the response Troy,

I'll give this a go tomorrow,

Thanks again!

[tr0y]

Just occurred to me... are you going to need to have more than one product displayed on a single page? If so, that is not quite going to work. I would adjust it:

        
        <div class="item">
            <div class="img"></div> 
            <div class="details">
                <span class="label">Product</span><span class="details">XXXX</span>
                <span class="label">Dimensions</span><span class="details">XXXX</span>
                <span class="label">Price</span><span class="details">XXXX</span>
            </div>
        </div>
        

[tr0y]

---

---

for some reason, the "br" tags are not coming through on the code editor... add a "br" after each of the first two "details" spans.