Heading background as wide as content instead of container?

HTML & CSS
1

i was wanting the background of a heading element to be a different color, but to only go behind the actual text of the heading rather than all across the containing div… is there some way to acheive that simply in css? any width properties I try and set go the whole way unless I set an absolute width on it…

2

I assume heading element=<h1> (or 2-3-4-5-6).

You could make the width shrink to fit, by display:inline/display:inline-block/float/AP

display:inline might work the best depending on your structure (some stuff might appear next to the heading now depending if it’s an inline element)

Alternatively give the heading a float:left;clear:left :slight_smile:

3

thanks a lot! display:inline does do it pretty well. now what would be the simplest standards compliant way of adding the effect of margin-bottom. would it be just to put the header inside a p or a div?

4

Well you could make that header element display:inline-block, although it wouldneed this (I assume you are using an <h1> below, though adjust to fit yours, aka add a class/ID or whatever also :))


* html h1{display:inline;}/*IE6*/
*+html h1{display:inline;}/*IE7*/
h1{
display:-moz-inline-box;/*FF2*/
display:inline-block;/*Now IE can use inline-block*/
}

The IE6/7 hacvks wouldn’t be needed had you used an inline element to begin with (headers are block to begin with)

I hope I make sense lol :slight_smile:

5

yup i read you! thanks a lot