Question

I’m trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I’m missing something, there doesn’t seem to be an easy way of doing this! The closest I’ve come to what I want is:

<style type="text/css">

#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}

#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}

h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}

</style>

<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>

This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.

Any suggestions gratefully received – this is driving me mad!

Answer 1

In your #wrapper2:

bottom: -4px;

Will make it move 4 pixels downwards to overlap the other line.

(Tested in Safari, works)