Centering content while having the background touch the left of the screen, - css

Question

Hopefully I can explain this well, as I haven't in the past.
I am looking to achieve something like this...Divide a wepage into three and put a title in the center.
|TitleLeft|Title|TitleRight|
So assume title is width:500px. Title left and right will change dependant on window size. Simple enough by setting it to 500px and then margin: 0 auto;. This is how I have the content of a page, but the title should stretch left while still being centered on the page (or left aligned within that 500px boundary). So assume title has a background of orange. TitleLeft should also have a background of orange.
Maybe this will help (it uses tables and is badly aligned...I want to avoid tables if possible!) as it shows roughly what my aim is.
http://jsfiddle.net/CmWRu/

Answer 1

If I understand your question correctly, you're looking for:
Middle column is a fixed with, centered on the screen
Left and right columns will always expand leftward and rightward, respectively, to fill out remaining available space, even if the screen re-sizes
Headings will always be centered in their respective divs.
OK, first some HTML (I'm using presentational markup to make this easier to follow...you'll want to decide what markup is semantically relevant for your project:
<div id="wrapper">
<div id="left">
<h2>Title Left</h2>
</div>
<div id="center">
<h2>Title Center</h2>
</div>
<div id="right">
<h2>Title Right</h2>
</div>
</div><!-- wrapper -->
A little CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#left, #right {
background: #FF8C00;
}
h2 {
text-align: center;
}
#center {
width: 500px;
float: left;
background: #e0e0e0;
}
And some jQuery:
//document ready function
$(document).ready(function(){
//on page load, call the resizeColumns function
resizeColumns();
//and also call it whenever the window resizes
$(window).resize( resizeColumns );
//we define the function
function resizeColumns(){
//grab the width of the wrapper and save it to a variable
var windowSize = $('#wrapper').width(),
//same thing for the width of the div with id of "center"
centerSize = $('#center').width(),
//windowSize - centerSize = the remaining width of the screen.
//Divide that by 2, and that's how wide each remaining column should be.
//We save that value to a variable
fluidSize = (windowSize-centerSize)/2;
//Now just set the width of the left and right columns equal to fluidSize
//and float them to the left.
$('#left, #right').width(fluidSize).css('float','left');
}
});