Can't figure out what makes contents inside div slide down

Code(HTML/CSS): http://jsfiddle.net/2tXZ6/6/

I can't get around to properly figuring out the issues in my code that cause the below anomalies for my product cell design.

1. Product title, product description, product images(1 2 3 4 links)开发者_开发百科 should've been to the left of the small image, not under it.

2. Product price and status for whether the item is in stock or not should've been to the left of the product title, product description and product images. Instead it's not visible.

3. When you hover over links 1, 2, 3 or 4 the popup for some reason stretches the whole product cell div and you can't see the whole image.

Anyone has any idea what might be wrong here?

1. Remove the floats from the elements inside div.product_info. Having the div itself floating is quite sufficient. Use float:right on image, info div and tag div.
2. Missing closing </a> from links 2, 3 and 4, and missing closing </ul>
3. Cannot replicate in FF6, possibly fixed by previous points or more info required.

http://jsfiddle.net/2tXZ6/9/

Reorganized layout and css a little: http://jsfiddle.net/2tXZ6/12/

Quite a few things.

1. Product title, product description, product images(1 2 3 4 links)

Let's deal with your product image first. You said you want the product title, etc to appear to the left of it, so that means that the product image needs to float to the right, not the left.

 #product_cell img {  float:right;  border: 1px solid #80889D; margin-right: 8px; }

Floating both things produces problems, and I'm not sure it's necessary so let's get rid of that:

 #product_cell .product_info{ }

2. Product price and status

These items aren't showing up because .thumbnail span and .thumbnail:hover span are being applied to them (they are hidden except when hovered on). This is from bad markup.

• Add your closing </ul> tag
• Items 2-4 are missing their </a> closing anchor tag

But it's still not on the leftmost spot like you wanted. You need to move the div's HTML ordering:

<div id="product_cell">    

  <div class="tag">
      <span class="price">$500.00</span><br />
      <span class="status sold">sold</span>
  </div>

  <img src="http://placekitten.com/100/100">
  <!-- ... -->

You can add some height to it for it to look a little better:

 #product_cell .tag { float: left; clear:right;  height:50px; }

3. links 1, 2, 3, 4

I'm not sure what you wanted to do here. Try playing with z-index

http://jsfiddle.net/WByr9/