CODEWITHSUNDEEP
htmlcss
user3027531
user3027531

Reputation: 282

hr line between two divs

Following is my fiddle in which I am trying to give hr line between two floating divs . Kindly let me know how can I give a responsive line between two floating divs.

http://jsfiddle.net/NH5Lc/5/

<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
    <hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>
<br/>
<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
    <hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>

Upvotes: 1

Views: 20291

Answers (5)

Siamak Motlagh
Siamak Motlagh

Reputation: 5136

You can use flex too. jsFiddle Live Demo 

    .between {
        border: 3px dotted #0099CC;
        margin-left:10px;
        margin-right:10px;
    }
    .parent
    { 
        display:-moz-box; /* Firefox */
        display:-webkit-box; /* Safari and Chrome */
        display:-ms-flexbox; /* Internet Explorer 10 */
        display:box;
        width:100%;
    }
    .child2
    {
        -moz-box-flex:5.0; /* Firefox */
        -webkit-box-flex:5.0; /* Safari and Chrome */
        -ms-flex:9.0; /* Internet Explorer 10 */
        box-flex:9.0;
    }
    <div class='parent'>
        <div class='child1'>Calories</div>
        <div class='child2'> <hr class="between" /></div>
        <div class='child3'>20</div>
    </div>
    <div class='parent'>
        <div class='child1'>Calories as dasd as dasd</div>
        <div class='child2'> <hr class="between" /></div>
        <div class='child3'>20</div>
    </div>

Upvotes: 2

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Html

   <div id="outer">
    <div id="left">Calories</div>
    <div id="middle">
        <hr class="between" />
    </div>
    <div id="right">20</div>
</div>

<br>
    <br>
    <div id="outer">
    <div id="left">Calories</div>
    <div id="middle">
        <hr class="between" />
    </div>
    <div id="right">20</div>
</div>

CSS

   #outer {
    display:block;
    width: 100%;
}
#left {
    width: 100px;  
    float: left;
    text-align:center;
}
#right {
    width: 200px;
  
    float: right;
    text-align:center;
}
#middle {
   
    float: left;
}
.between {
    border: 3px dotted #0099CC;
    width:200px;
    margin-left:10px;
    margin-right:10px;
}

Output:

enter image description here

Working fiddle

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105943

it seems like you could use a <table> or at least a list <ul> for what you are trying to do .

With a list, you can use text-align, float and pseudo-element . http://codepen.io/gc-nomade/pen/Bmhqc 

ul, li {
  padding:0;
  margin:0;
  list-style-type:none;
  text-align:right;
}
li em {
  float:left;
}
li em:after {
  content:'';
  border-bottom:dotted;
  width:2000px;
  margin-right:-2000px;/* reduce space needed to 0 */
  display:inline-block;
  vertical-align:middle;
}
li, span {
  background:white;
  overflow:hidden; /* hide pseudo line overflow */
}

<ul>
  <li><em>calorie</em><span>20</span></li>
  <li><em>calorie</em><span>20</span></li>
  <li><em>calorie</em><span>20</span></li>
  <li><em>calorie</em><span>20</span></li>
</ul>

Upvotes: 0

ElendilTheTall
ElendilTheTall

Reputation: 1452

<div style="border-top:1px solid black; width:100%;"></div> will do it. As Gert B. says, you should really be using a linked file rather than inline styles though. In which case, you would have in your CSS file:

.line{
     border-top:1px solid black;
     width:100%
}

Then in your markup:

<div class="line"></div>

Upvotes: 0

Ferrakkem Bhuiyan
Ferrakkem Bhuiyan

Reputation: 2783

paste it your between class .between {

width: 500px;
float: left;
border-right: 1px solid gray;

}

Upvotes: 1

Related Questions