Question

I have a div inside which there is a header and I want to underline the header such that the underline covers approx 80% of the div, with 10% indent on both sides. Also, I want the underline to be some pixels below the header. I am trying this

---

In the html part

<div id="divname">
     <h2>HEADER</h2>
</div>

---

---

In the css part

#divname h2 {
text-align: center;
font-family:arial,sans-serif;
text-decoration:underline;
}

---

but here the header is directly underlined with no height gap and also the underline has same width as the header data. How can I do that ?

Answer 1

set a border to the h2 element, and set its width to 80%; margin:auto; is used to center it

#divname h2{
    width:80%;
    margin:auto;
    display:block;
    border-bottom:1px solid gray;
}

here is a jsfiddle : http://jsfiddle.net/bxKZ3/