Hi, im working on something now where i would like to give quite a few block level elements like h1 and div tags their own background color and am getting a bit frustrated with the default width.

ive tried changing them to display: inline and floating them but there is allways negative effects. What is the best way to get control over the width, bearing in mind there are some headers and text which i would like to resize with text resize so i cant really use width:

thanks!

Did you try clearing your floats after you were done with them? Usually that's why people fail with floats.

You could cheat the issue a bit, if the background color is that important to you, by doing something like this:

h1 span {
     background-color:  #000000;
}

...
...

<h1><span>This is where your header goes, with a black background color</span></h1>

Since span is an inline element by default, you'll probably get the effect you want.

Its a good way yeah, i think i will hold it as a last resort.

The problem i have with floats is that i usually end up floating all the parent containers all the way back to body most of the time just to keep the layout, and im trying to avoid that too...

The problem i have with floats is that i usually end up floating all the parent containers all the way back to body most of the time just to keep the layout, and im trying to avoid that too...

That's not necessary, you must be doing something else that's making you have to do that.

aaahhh! noooo! i knew it would come to this. I was hoping for a legal quick fix and every one of you guys posts reminds me that there is no way to get round it other than learn floats properly... why do you have to be so right?!?!

Because then you wouldn't learn the right way?

other than learn floats properly.

That IS the "legal" quick fix