CODEWITHSUNDEEP
htmlcss
user2738640
user2738640

Reputation: 1227

Add a line vertically in the middle

I want add a line vertically in the middle of a heading, and in the right side, I want to add another div. I can set the line in the middle of the heading, but when I add style for the right span, the line is no more in the middle.

Edit: The problem is with Firefox. It works fine on Chrome.

Please see the attached image:

enter image description here

Here's what I'm trying:

HTML:

<div class="box"> 
    <h2><span class="text">Hello world</span><span class="right"></span></h2>
</div>

CSS:

h2 {   
   border-bottom: 1px solid #000; 
    line-height: 0.1em; 
    margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-top: -5px;
}

Demo: http://jsfiddle.net/RecUE/

Upvotes: 1

Views: 135

Answers (4)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Your issue was with floating, check out this updated demo.

.box{
    width: 500px;
    margin-top: 30px;
}

h2 .text {
    background-color:white;
    height: 10px; 
}

h2 {   
   border-bottom: 1px solid #000; 
    line-height: 0; 
    margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
    float:left; 
}

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    margin-top: -15px;
}

DEMO

Upvotes: 2

Arun Bertil
Arun Bertil

Reputation: 4638

Check this fiddle

http://jsfiddle.net/RecUE/8/

.box{
    width: 500px;
    margin-top: 30px;
}


.text { 
    background:#fff; 
    float:left;
    padding:0 10px; 
}

.line {
    float:left;
    min-width:400px;
    border-bottom:1px solid black;
    height: 10px;

}
.right{
    background: green;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    margin-top: -5px;
}

Upvotes: 1

Anna Gabrielyan
Anna Gabrielyan

Reputation: 2170

try this fiddle , i have edited your html , and css 

.line {
    float:left;
    min-width:400px;
    border-bottom:1px solid black;
    height: 10px;
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Try this:

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-top: -15px;
}
.text{
    float: left;
    display: block;
    height: 30px;
}

demo

Upvotes: 0

Related Questions