Fixed Width Centered Div with Filler Div on Left Side

[MadLittleMods]

I want to make a header block like the image below(sorry for bad quality - big gifs mess up like that)

 

I want the centered main div to be in the middle and then a filler div on the left to fill up the space. I have tried many things but this is just what I have at the moment. Please no absolute hacks 

 

I have this code so far:

	<div class="cadence_header_holder">
		<div class="cadence_header_left floatleft"></div>

		<div class="cadence_header_main floatleft">


		</div>

		<div class="cadence_header_right floatleft"></div>
		<div class="clear"></div>
	</div>

 

.cadence_header_holder
{	
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
margin: 0 auto;
}

.cadence_header_main
{
background: url(../images/spec/cadence_header_main.png) no-repeat;
width: 1000px;
height: 140px;
margin: 0 auto;
}

.cadence_header_left
{
width: 100%;
background: url(../images/spec/cadence_header_left.png) repeat-x;
height: 140px;
}

 

That code aboves gives an output of:

 

 

[MadLittleMods]

Closest I can get is this:

 

with the code of:

	<div class="cadence_header_holder">
		<div class="cadence_header_left floatleft"></div>

		<div class="cadence_header_main">


		</div>

		<div class="cadence_header_right floatleft"></div>
		<div class="clear"></div>
	</div>

 

.cadence_header_holder
{	
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
margin: 0 auto;
}

.cadence_header_main
{
background: url(../images/spec/cadence_header_main.png) no-repeat;
width: 1000px;
height: 140px;
margin: 0 auto;
}

.cadence_header_left
{
width: 100%;
background: url(../images/spec/cadence_header_left.png) repeat-x;
height: 140px;
}

[dropfaith]

okay its 4am but this should get you going the right way

 

this makes  a 3 div layout style one all left and then 2 on top of eachother like your top image was

 

 

<style>
.filler {float:left;}
.rightside {float:right;width:1001px;}
.header {width:1000px;height:200px;}
.content {width:1000px;}

</style>


<div class="filler">ggewgw
</div>

<div class="rightside">
<div class="header">
gsd
</div>
<div class="content">
sfdgsdgsg
</div>


</div>

 

 

[MadLittleMods]

That setup doesn't seem to do much but make a worse version of what i have and yes i changed to work with my stuff...

 

When I analyze it it kinda makes sense since your are floating left and right. I do not want my main header to the side of the screen. I want it smack dab in the middle while my left filler fills up all the space on the side if there is any. The right div really holds nothing and doesn't have any properties...

[MadLittleMods]

Got it done with some Jquery -- Still some glitches but mostly works!

$(document).ready(function() {

		var window_width = $(window).width();
		var half_window_width = window_width / 2;
		var filler_width = half_window_width - 500;

		 $("#cadence_header_filler").width(filler_width);


		$(window).resize(function() {
			var window_width = $(window).width();
			var half_window_width = window_width / 2;
			var filler_width = half_window_width - 500;

			 $("#cadence_header_filler").width(filler_width);
		});
	});