html5 - CSS/html auto adjusting line joining left-aligned word and right aligned -


i have been trying make line join 2 words. sentence 1 on left , no 2 on right.everything should on same line.

i want line flexible , adjust width when browser re sized, , have far failed miserably this.

it similar :

see jsfiddle

<h1>heading</h1> <h1>this longer heading</h1> 

css


h1 {     overflow: hidden;     text-align: center; } h1:before, h1:after {     background-color: #000;     content: "";     display: inline-block;     height: 1px;     position: relative;     vertical-align: middle;     width: 50%; } h1:before {     right: 0.5em;     margin-left: -50%; } h1:after {     left: 0.5em;     margin-right: -50%; } 

but 1 line joining words.

is you're after?

live demo

html:

<div class="header"> <div class="headerpart1">heading</div> <div class="headerpart2">this longer heading</div> </div> 

css:

.header {     overflow: hidden;     text-align: center;     border-top: 1px solid #000;     border-bottom: 1px solid #000;     vertical-align: middle; } .headerpart1, .headerpart2 {     display: inline-block;      clear: none; } 

Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -