Underline <h1> within a div

Question

I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...

This is the design:

And this is what I get:

Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.

HTML:

<div class="title">
    <h1>Contacteer ons</h1>
</div>

CSS:

h1 {
    border-bottom: 8px solid #57c4d0;
    position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}

.title {
    border-bottom: 1px solid #dedede;
}

I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?

Answer 1

You can change h1 to display: inline-block;

See a live example at (added margin-bottom to .title for clarity):

http://jsfiddle.net/P4BGC/

Answer 2

See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.

<div><h1>Hello, world</h1></div>
Lorem ipsum

the css

​h1 {
  border-bottom: 3px solid red;
  display: inline;
}​