Search code examples
cssborder

Underline <h1> within a div

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:
enter image description here

And this is what I get:
enter image description here

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?

Solution

  • You can change h1 to display: inline-block;

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

    http://jsfiddle.net/P4BGC/