elements of variable sizes in the same space - html

Question

I have two elements that have variable width, and must share the same space in a div
I created an example in this link:
http://jsfiddle.net/zWVVN/
#test-1: Should look like.
#test-2: Problem situation.

Answer 1

Hi you define hr float left that conditions you must define width of all hr those give to float as like this
Css
#teste1, #teste2 {
width: 300px; }
hr {
border: 1px solid green;
background: red;
height: 25px;
float: left;
width:200px;
}
h2 {
float: right;}
#teste1 hr{
width: 230px;}
HTML
<div id="teste1">
<hr>
<h2>conteudo</h2>
</div>
<div id="teste2">
<hr>
<h2>conteudo</h2>
</div>
​
Live demo http://jsfiddle.net/rohitazad/3e6bd/2/

Answer 2

If you want both divs to take up the whole space and do not want to wrap text down, then why have u set the width for both the divs to 300px. Remove the width assigned to both the divs and make both HR to float left.
#teste1, #teste2 {
//this class not needed
}
hr {
border: 0;
background: red;
height: 5px;
float: left;
}
h2 {
float: left;
}
Demo : http://jsfiddle.net/3e6bd/3/