divs not working correctly

Question

This problem is a little weird (as I need to do this way, since I din't find any another good way).

I have three divs inside a "big div".

The main div is called:

<div class="produtos-item">

And inside this div I have three another divs

<div class="item">

So what I need?

Imagine a store (e-commerce). I have 3 products (item).

PRODUCT-1 PRODUCT-2 PRODUCT-3
------------------------------
THIS LINE
PRODUCT-4 PRODUCT-5 PRODUCT-6

I need to insert a line between the divs. BUT if I set the div .item with no height will break the layout. See the screenshot.

As you can see, this black circle was the product. But since there is no fixed height and I can't set this (because the title can be bigger), it will break the layout. If I can "call" the main div (produtos-item), I can fix this thing.

Do you know any solution? :(

JSFiddle: http://jsfiddle.net/WRGba/ [edited May, 10]

Answer 1

Try putting display:inline-block; on them (zoom:1;*display:inline; for IE6, IE7 compatibility)

Also, a jsFiddle couldn't hurt!

Using @Shebo's example from above:

Not working example: jsFiddle

Working example: jsFiddle