Hi there

 

I am using the bottom border as a underline, I have tried the text underline bit want to be able to make adjustment.

 

The issue I have is that the border stretches the width of the page and I want it to automatically adjust to each title.

 

The site is locally hosted so cant give address, also it is a wordpress site.

 

Html

<div id="title"><div id="underline_title"> Title </div></div>

 

CSS

 

 

#underline_title { 
 width:autopx;
 margin-left:auto;
 margin-right:auto;
 border-bottom-color:#949494;
 border-bottom-style:solid;
 border-bottom-width:1px;}

#title {
 color:#202020;
 width:autopx;
 font-family:'Droid Serif', sans-serif;
 font-size:25px;
 text-align: center;
 line-height:1.5em;
 margin-left:autopx;
 margin-right:autopx;
 margin-bottom:5px;}

 

Any help would be great, have not been using css for long so it may be something very simple that I am doing wrong.

 

Regards

 

Tom

Edited June 14, 201115 yr by tommy999

Either

#underline_title {

width:autopx;

margin-left:auto;

margin-right:auto;

border-bottom-color:#949494;

border-bottom-style:solid;

border-bottom-width:1px;

display: inline;}

 

or

 

<div id="title"><span id="underline_title"> Title </span></div>

Problem is that DIV's are block level elements which, by their very nature, stretch 100%.

Exactly.

Works a charm, thank you for your help.

 

Is there a way that I could have it over expanded each side?