Limiting the background color to the width of the header
I am trying to get the background color to strictly adhere to the header text and not span the entire width of the page. I understand that block level elements take up the full width of the page, so I was wondering if there is a way to get around this other than forcing inline styles.
EDIT: If I were to use display: inline-block; why even though I am pointing text-align: center;
out my headings are still left aligned? Should I use float instead?
Or displaying as an inline-block might suit most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing your question, this is not the answer you are looking for, but it might be helpful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?) ...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This will solve this problem, I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css will be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify text-align: center; an attribute of the parent element containing your div block to center your header and its background with the display: inline block;