Question : CSS to make image expand to left

I want a variety of same height different width images (#headerImage) to jut out to the left of my centered main content area (#header). I want the right edge of each image to stay in the same x-position but have the left edge dependent on the width of the image

There will be only one image per page, but different images on each page.

As browser viewports get smaller I want the main content area to be centered on irrespective of the image—i.e. I want the left edge of the image to be cut off if the browser viewport is too small. But I don't want a horizontal scrollbar to appear unless #header begins being cut off—I don't want only part #headerImage being cut off to create a horizontal scrollbar.

So I've created #leftContainer as float:left to contain #headerImage as float:right. I'm not new to CSS but I'm new to using CSS positioning much.

This seems like a common enough requirement, to hold the right edge of an image position steady while letting its left edge expand/contract depending on image used.

Is this a good solution? What problems will I encounter? What should I do differently?

Happy to award points for all helpful suggestions :)

CSS-Header-image.jpg (14 KB) (File Type Details)

CSS Header image

1:
2:
3:
4:
5:
6:



<div id="header">
	<div id="leftContainer"; float="left">
		<div id="headerImage"; style="background: url(images/header-image-1.jpg"; float:"right") >
		</div>
	</div>
</div>

Question : CSS to make image expand to left

Answer : CSS to make image expand to left

the deploy/undeploy commands execute these commands for you. No need to execute them before deploying the application