Width of Headers (H1, H2 etc)

Question

I want my headers (h1 through h6) to have a background colour (different to that of the page background), I also want the width of this background to be the same as the width of the text in the header, plus padding (Not the width of the container that the header is in, which is what is happening now).

There isn't much point in me showing you any code as this is fairly simple (or it should be anyway!). The container is a fixed width. Right now I have just some margins, padding, background colour and font styling set for the h1, h2, h3 etc tags.

EDIT: I guess code would help! https://web.archive.org/web/20090724165158/http://adriantrimble.com/headers (this has Gerald's solution applied, although obviously this would still not work in IE6/7 and still has problems in newer browsers). Using display:inline causes more problems than it solves, using float: left and clear: left as mentioned has problems because of the 2 column layout. Thanks for everyones help so far.

Answer 1

h1-h6 are block level elements and even if they are not in a container (or just body) they'll stretch over the width of the window. One solution is to change their display to be inline-block instead:

<h1 style="background-color:pink; display:inline-block; padding:1em;">Testheader</h1>

Note that you'd have to make a manual break after the header if the next element isn't a block-level element like p.

Answer 2

I would use

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;} 

---

edit after comment

If the containing div is floated, the clear won't clear the left col. So float rightcol left and remove the margin

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}

Answer 3

A header tag (h1-h6) is a block-level element and thus fills the width of the container it's in. Changing it to

display:inline 

will bring the background in to just the width of the text. This will introduce other issues though (since inline elements don't behave like block elements in lots of other ways).

The alternative is to set a width for the header itself. If you wanted to be really tricky you could do that with javascript so that it calculates it for each header specifically.

You'll have to play around a bit and figure out what works in your situation.

Answer 4

as others mentioned display:inline-block; would be an option, but does not work in all broswers. what i could think of right now is giving the headers a float:left; and the element that follows a clear:left;

another way - not as clean - is to add spans around your heading's text, and give that spans a background color:

<h1><span>your text</span></h1>

h1 span { background-color:#369; }

Answer 5

If you want your hx h1 , h2 , h3 , etc. to have the same with as the text in it, you could try

h1 {
    display:table;
}

It doesn't break margin collapse like display: inline-block or float: left .

See snippet :

 #page { background-color: #ededed; height: 300px; } h1 { display: table; background-color: #10c459; padding: 10px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #fff; font-size: 24px; font-weight: 700; } 

 <div id="page"> <h1>Hello world</h1> </div> 

Answer 6

Another way to add a background colour to a header element which only is as wide as its text (without using extra elements or display properties) is to use the CSS first-line selector;

Example:

h1:first-line { 
 background-color: yellow;
}

Answer 7

我的解决方案是在h1中放置一个span并改为调整span的样式。