1

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.
2
  • Not clear what you are asking. Can you clarify?
    – ckaufman
    Apr 11, 2012 at 5:40
  • I want to put two elements in the same line, so that they automatically use all the space Apr 11, 2012 at 5:48

2 Answers 2

0

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/

1
  • Hey @azad, the width of <hr> is dynamic, can not set a value. I.e. 230px or 200px. Apr 11, 2012 at 5:51
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.