hide half of a div with overflow is'nt working

[lamo528]

i've used overflow property to make the half of div that i don't want hidden , but the whole div gone.\[code\].line { position: relative; overflow: hidden;}.gl { position: absolute; right: 10px; width: 100%; height: 5px; background-color: green; display: block;}.rl { position: absolute; width: 100%; left: 30px; height: 5px; background-color: red; display: block;}\[/code\]and this html code\[code\]<div class='m1'> MAIN 1 <div class='line'><div class="rl"></div><div class='gl'></div> </div> <div class='des'>kasjfnkvanj</div></div>\[/code\]i want to hide both lines green and red , only the extend part that overflows the parent div but all of them get hiddenany help?