Static Positioning and Overflow

Question

I'm trying to write CSS only tooltips. I'm worried the target demographic may have JS disabled:

<div id=items>
    <div id=c1 class=container>
        <input type=image class=option id=o1 value=Sample></input>
        <label for=o1 class=name>
            OxyClean
        </label>
        <label for=o1 class=price>
            $19.95
        </label>
    </div>
    <div id=c2 class=container>
        <input type=image class=option id=o2 value=Sample></input>
        <label for=o2 class=name>
            ShamWow
        </label>
        <label for=o2 class=price>
            $19.95
        </label>
    </div>
    <div id=c3 class=container>
        <input type=image class=option id=o3 value=Sample></input>
        <label for=o3 class=name>
            Gopher
        </label>
        <label for=o3 class=price>
            $19.95
        </label>
    </div>
    <div id=c4 class=container>
        <input type=image class=option id=o4></input>
        <label for=o4 class=name>
            Mighty Tape
        </label>
        <label for=o4 class=price>
            $19.95
        </label>
    </div>
</div>

CSS:

div,label{
    position:absolute; /*Note This*/
}
#items{
    width:100%;
    height:200px;
}
.container{
    width:200px;
    overflow:hidden;
    position:relative;   /*And This*/
}
.container:hover{
    height:300px;
}
.option,.price,.name{
    left:0%;width:100%;
}
.option{
    height:200px;
}
.price,.name{
    height:50px;
}
.price{
    top:250px;   
}
.name{
    top:200px;   
}

When the containers are absolutely positioned by removing one of the noted lines, the tooltips work, but I do not want to hard-code or use scripts to generate these positions. This is why I wish to use static positioning.

Unfortunately, static positioning causes the overflow property to cease functioning (without the browser making note of a conflict):

Desired View:

*------------------------------------------------------------------------*
|*-------**-------**-------**-------**-------**-------**-------**-------*|
||       ||       ||       ||       ||       ||       ||       ||       ||
||       ||       ||       ||       ||       || FOCUS ||       ||       ||
||       ||       ||       ||       ||       ||       ||       ||       ||
||       ||       ||       ||       ||       ||       ||       ||       ||
|*-------**-------**-------**-------**-------*|-------|*-------**-------*|
*---------------------------------------------|-------|------------------*
                                              *-------*
Actual View:

*------------------------------------------------------------------------*
|*-------*                                                               |
||       |                                                               |
|| FOCUS |                                                               |
||       |                                                               |
||       |                                                               |
||-------|                                                               |
*|-------|---------------------------------------------------------------*
 *-------*                                                               
 *-------*
 |       | 
 |       | 
 |       | 
 |       | 
 |-------| 
 |-------| 
 *-------*

Any suggestions? We're too far down the all divs are absolutely positioned route to change the first noted CSS property.

EDIT:

http://jsfiddle.net/w3v8394r/1/

Position:Relative positioning solved major issues (Thanks Aaron), but not all: -Items do not stack horizontally.

Answer 1

Add float: left; to .container.

Edit:

I like it. What about centering?

Instead of float: left use display: inline-block and add text-align: center to #items

And add vertical-align: top; to .container

http://jsfiddle.net/w3v8394r/3/

Answer 2

Thanks Aaron, here's the answer I needed:

.container{
    position:relative;
    display:inline-block;
    vertical-align:top;
}