HTML CSS Overflow not working - css

Question

![enter image description here][1]I want to make a horizontal line after my text.
Instead of hiding the content that goes out of the div (#line), it doesn't display it at all.
The #line div has to be bigger than the #textline div because I don't know the size of the text div.
Edit: Here is the Jfiddle http://jsfiddle.net/wakary/8tTzz/2/
Put #line {width: 100;} to see what I want to accomplish.
Edit: (what I want to acheve, the title changes):

Answer 1

Hi I have made some small changes to your code
#textline{
position: relative;
width: 400px;
height: 36px;
margin-left: 20px;
overflow: hidden;
}
#text{
position: absolute;
color: green;
height: 36px;
background:white;
padding-right:10px;
}
#line{
position: absolute;
height: 10px;
width: 80%;
border-bottom: 1px solid green;
}
And the HTML like this
<div id="textline">
<div id="line"></div>
<div id="text">Text</div>
</div>
So in this case you will have one div over the other, the line will cover all it´s container, and the text will hide some part of this line.

Answer 2

Removing the width of the container element works.
Demo
HTML
<div id="textline">
<div id="text">Text</div>
<div id="line">
<div id="upspace"></div>
<div id="ll"></div>
</div>
</div>
CSS
#textline
{
height: 36px;
margin-left: 20px;
}
#text
{
float: left;
color: green;
height: 36px;
}
#line
{
float: left;
height: 36px;
width: 400px;
}
#upspace
{
height: 10px;
}
#ll
{
height: 1px;
background-color: green;
}