Div with presentation of the product

[questionary]

Hi,

I am working with small academic project and I am stuck on creating presentation of single product from list of ptoducts.
I want to achieve something like that: (in attached graphic file) - may be without rounded corners.

I wrote code but it is not working properly...

<div style="width:405px; background-color:red; border:solid 1px; black">
	<div style="width:80px; background-color:yellow; float: left;">
		<div>
		there will be an image
		</div>
		description of an image
	</div>

	<div style="width:320px; background-color:lime; height:100%;">
		<div style="width:250px; background-color:blue; float:left; height:70%;">
		name of the product
		</div>
		<div style="width:65px; background-color: violet; float:right;">
		quantity
		</div>
		<div style="width:250px; background-color:navy; float:left;">
		description of the product
		</div>
		<div style="width:65px; background-color: grey; float:right;">
		price
		</div>
	</div>
</div>

[macneato]

* {
			  margin: 0;
			  padding: 0;
			  border: 0;
			  font-family: sans-serif;
			  font-size: 1em;
			  font-weight: normal;
			  font-style: normal;
			  text-decoration: none;
			}
			
			
			
			.Productcontainer {
				width: 405px;
				height: 220px;
				border: 1px solid black;
				position:relative;
				margin: 10px auto;
				padding: 15px;
				
			}
			
			.Productimage {
				background: blue;
				width: 200px;
				height:200px; /* add 20px for desciption */
				position:relative;
				float:left;
			}
			
			.Productimage_desc {
				position:relative;
				height:20px;
			}
			
			.Productdetails {
				position:relative;
				margin-left: 210px; /* add 10px to img width, will give us decent padding */
			}
			
			.Productdetails p { /* Since i removed styling, this will add padding inbetween each of our paragraphs */
				padding-bottom:10px;
			}

<div class="Productcontainer">
        	<div class="Productimage">
        		<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Blue_Box_in_museum.jpg/200px-Blue_Box_in_museum.jpg">
        		<div class="Productimage_desc">This is the description</div>
        	</div>
			<div class="Productdetails">
				<p>Name of the product</p>
				<p>quantity</p>
				<p>description of the product</p>
				<p>price</p>
			</div>
		</div>

[diafol]

This would be my markup:

<div class="card">
	<img src="whatever"  />
	<p>description of an image</p>
        <ul>
             <li>name of the product</li>
	     <li>quantity</li>
	     <li>description of the product</li>
	     <li>price</li>
         </ul>
</div>

Notice the lack of presentation divs (no divitis).

This should make reading of the data in the absence of css a bit more 'real'.

You can achieve almost everything you need with CSS descendants:

/*do a reset css - i.e. give everything a value of 0/none etc. - including paddings and margins. Eric Meyer has an excellent version*/
/*assume the images in the markup will be 120px width X 80px height (change values accordingly)*/

.card{
  background-image: url(images/card.jpg); /*this gives the nice visuals/rounded edges etc without the hard work - BUT - text needs to ensure that it doesn't overrun the dimensions available to it*/
  background-repeat:no-repeat;
  width: 300px;
  height: 180px;
  padding: 20px; /*workable interior width = 300 - 2X20 = 260, height = 140px*/
}
.card p{
  width: 120px; /*set this to the width of the image so it fits nicely underneath*/
  margin-top: 5px; /*separate paragraph from image*/
}
.card ul{
  float:right;
  width: 120px /* this means that the 'data' will have a 20px gap between it and the image/paragraph*/
}
.card li{
 margin-bottom: 15px; /* just separates the list items from one another*/
}

.card ul li:first-child{
 font-size: 20px;/*make first list item BIGGER*/
 font-weight:bold;
}

CAVEAT: I haven't tried this - off the top of my head. You may find a considerable amount of tinkering is required here!

[macneato]

Cool approach. Should work. A few things i have noticed though.

IE 6 likes spaces when it comes to pseudo or it wont work

.card ul li:first-child/*note space */ {
font-size: 20px
font-weight:bold;
}

Secondly, ensure you dont get bullets

.card li{
margin-bottom: 15px
list-style: none
}

Fix some structure to get float

<div class="card">
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Blue_Box_in_museum.jpg/200px-Blue_Box_in_museum.jpg"  />
		        <ul>
		             <li>name of the product</li>
				     <li>quantity</li>
				     <li>description of the product</li>
				     <li>price</li>
		         </ul>
			<p>description of an image</p>		 
		</div>

finally add a clear both to the p

.card p{
			  width: 200px; /*set this to the width of the image so it fits nicely underneath*/
			  margin-top: 5px; /*separate paragraph from image*/
			  clear:both;
			}

[diafol]

Yes well spotted Mac - rep to you. Like what you've done with it too.
Wrote it in a bit of a hurry, and missed a few things.

I had a little play with it and found that I forgot to float the image and paragraph. Doh! Unfortunately, this messed up the whole image -paragraph thingy. So I made these changes:

.card p img{
  display:block; /* in case image less than width of paragraph - don't want text wrapping*/
}
.card p{
  width: 120px; 
  margin-top: 5px; /*separate paragraph from image*/
  float:left;
}

Because I changed the image - paragraph relationship:

<div class="card">
	<p><img src="whatever"  />description of an image</p>
        <ul>
             <li>name of the product</li>
	     <li>quantity</li>
	     <li>description of the product</li>
	     <li>price</li>
         </ul>
</div>

I really don't know how you feel about that guys. Is it kosher? Image inside a p tag? If so, perhaps it's a little bit better than moving the p tag to below the list items. But I suppose that's just a matter of opinion.

[macneato]

Don't see why it shouldnt validate. A job well done!

Now it would be great, if "questionary" would log in, mark as solved and continue his small academic project