Not getting desired effect with CSS - html

Question

I'm trying to get this effect with CSS (that little grey side stripe thingy):
However, nothing of what I'm doing is working. My code looks like this:
<header class="entry-header">
<div class="entry-title">
<h1>Contact</h1>
</div>
<div class="entry-float"></div>
</header><!-- .entry-header -->
I've tried floating div.entry-title left and padding div.entry-float, changed div.entry-float to <span>, tried using backgrounds on one div only, all of it unsuccessfully.
This must be 100% flexible, as not all headings are the same width. I'd prefer avoiding Javascript/jQuery entirely.
Can anybody assist?

Answer 1

I would do this with a trick where you place the "line" as a CSS3 pseudo element aligned to the center of the container. Then give the title element a background color with padding and place it over the top of the line. This will allow for variable length titles.
body{
background:#FAFAFA;
}
.entry-title{
position:relative;
margin:0 110px;
}
.entry-title:before{
position:absolute;
content:"";
top:50%;
background:#f7f7f7; /* line color */
left:0;
right:0;
height:10px;
margin:-5px 0 0; /* = half the height value */
}
h1{
position: relative;
color: #d9d9d9;
padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
background:#fafafa; /* same as background color of container element */
display:inline-block;
}
JSFIDDLE DEMO

Answer 2

There are various ways to achieve this, one of them is to add pseudo element to header, absolutely position it as desired and hide extra with overflow: hidden:
<h1>Content</h1>
h1 {
text-transform: uppercase;
font-size: 1em;
color: grey;
position: relative;
overflow: hidden;
}
h1:after {
content: "";
display: inline-block;
height: 4px;
width: 100%;
background: grey;
position: absolute;
top: 8px;
margin-left: 10px;
}
JSBin.