Question

I have some css problem. here is what I need.

No matter how many words the title have(example: title could be What's new today?, could be hello world)

it always have a background line pass through the whole div, and the word’s background is white. (the word should be text-align:center; and it’s background looks like broken the line)

Here is my code:

<style> 
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style> 
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>

also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.

Answer 1

This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.