Resizing divs and aligning background

[sg-]

\[code\]<div style="width: 600px;"> <div class="header"> <img src="http://stackoverflow.com/questions/12739350/logo.png"/></div><div class="container"> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div> <div class="div4">Div 4</div> <div class="div5">Div 5</div></div>.header{ height:200px; background-image: url('http://www.imgur.com/YLVpI.png'); margin:0; width:1000px; background-position:left; }.header img{ margin-left:auto; margin-right:auto;}.container{ text-align:center;}.container .div1{ background-image: url('http://www.imgur.com/YLVpI.png'); background-position:left; display:inline-block; width:20%; margin: 0px; border-bottom-left-radius: 20px;}.container .div2{ background-image: url('http://www.imgur.com/YLVpI.png'); background-position:left; display:inline-block; width:100px; margin:0; padding:0;}.container .div3{ background-image: url('http://www.imgur.com/YLVpI.png'); background-position:left; display:inline-block; margin:0; padding:0;}.container .div4{ background-image: url('http://www.imgur.com/YLVpI.png'); background-position:left; display:inline-block; width:100px; margin:0; padding:0;}.container .div5{ background-image: url('http://www.imgur.com/YLVpI.png'); background-position:left; display:inline-block; width:90px; border-bottom-right-radius: 20px; width:20%; margin:0;}\[/code\]There are several things I cannot get to work simultaneously:[*]Make the header span 100% of the page width.[*]Make div 2 and 4 a set width of 30px each.[*]Make div 3 a set width of 400px.[*]Make div 1 and 5 fill the remaining space regardless of how big the window is.[*]Center everything so it looks nice.[*]Make the background align correctly.Does anyone know how to do this? http://jsfiddle.net/jaTuu/