glenelkins Posted January 9, 2009 Share Posted January 9, 2009 Hi h1{ clear: both; padding-top: 22px; padding-bottom: 5px; border-bottom: 1px dotted #b7b9bb; font-size: 2.2em; color: #143a81; text-align: center; } works fine, but as the H1 element stretches to default of 100% width, the border stretches right accross as far as the container goes. What i need is the H1 container itself to not take 100%, but also not a set width as the text will change! It needs to just be the width of the text inside the <h1></h1> tag Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 9, 2009 Share Posted January 9, 2009 It wouldn't be standard for block elements to behave like that, applying display:inline; dose what you want. I.e. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Title</title> <style type="text/css"> h1 { font-size: 2.2em; color: #143a81; padding-top: 22px; padding-bottom: 5px; display: inline; border-bottom: 1px dotted #b7b9bb; } </style> </head> <body> <div class="wrapper"> <h1>Test</h1> <p>Test</p> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
glenelkins Posted January 9, 2009 Author Share Posted January 9, 2009 hi yes display:inline does do the trick. But then the <h1> element will not centre text using text-align:center; even on the container! Quote Link to comment Share on other sites More sharing options...
glenelkins Posted January 9, 2009 Author Share Posted January 9, 2009 actually, yes it does...im just talking shit Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.