CSS span overflow auto or scroll not working with child element

Question

I have the following setup:-

http://jsfiddle.net/YKXUb/1/

And the css is like this:-

.two { 
 height: 100%;
 width: 100%;
 border:1px solid green; 
 }

.hold 
{  
    float: left;
    height: 100%;
    width: 35%;
    border:1px solid green; 
}

.right {  height: 100%; border:1px solid green;}

.hold > img{width: 100%;height:100%;}

#one{ height: 300px; width: 600px; margin: 0 auto;}

.center{text-align:center;margin:0 auto;}
.rights{text-align:right;}

.main{width:100%;display:block;border:1px solid green;} 


.five{width:20%; border:1px solid green;float: left;}
.six{border:1px solid green;display:block;}

as you can see , the contents which exceeds the span width just keeps on going , I've tried with overflow:scroll and overflow:auto but nothing seems to work

Any help would be appreciated guys :)

Answer 1

overflow:auto works for me

.six{border:1px solid green;display:block; overflow:auto}

DEMO

Answer 2

overflow:auto works but you need to add the height also:

.six{ border:1px solid green; display:block; height:100px; overflow:auto }

You need to Add height as per your requirement