Block elements around floating elements with background color

Question

This is my case:

http://jsfiddle.net/vZ4sB/

Is there any way that the background color H1 covers the entire width of the MINUS container across the width of the moved item?

Answer 1

jsFiddle is temporarily not working, but here is what I developed:

HTML

<div class="container"> <h1> <img src="my_img.jpg" /> <span>Here my header!</span> </h1> </div> 

CSS

 .container { border: 1px solid red; height: 500px; width: 500px; } h1 { background: url(my_header_bg.jpg) top right no-repeat; height: 30px; } h1 img { float: left; } h1 span { background: url(my_header_bg.jpg) top left no-repeat; float: left; line-height: 30px; padding: 0 5px; } 

I am shooting a little in the dark here, but I assume you have a heading with text, a background image behind the text, and perhaps the logo on the left? Please let me know if I am wrong.

This might take a little more, but I did to put both the image and the range (with text) in H1 and set the height on h1 to a static height. Thus, the span will always depend on the image, and H1 will increase by 100%. I set the left-aligned background image to span. Then I set the right alignment to H1. If the background image is a seamless pattern of some type, this is likely to work. If this is an image with a static width, you can set the spacing to the width of the background image and extrude it to H1.

If it's just blue, you can just keep the blue background H1.

See if this suits what you are working with.

Answer 2

You can, if the width of the .floater element .floater static at 200px (plus 2px for borders), use the adjacent selector to assign margin-left these h2 elements after .floater :

 .floater + h1 { margin-left: 202px; } 

JS Fiddle .

Answer 3

Try:

 h1 { background: blue; overflow: hidden; }