[OllyL]

Hi there,

I've got a bit of a problem and hoping someone can help. I have a document which is like this (not exactly but this is the rough structure)

<header>
<div class="centered-container">
<div class="partial-width-bar">Some Content</div>
</div>
</header>

which produces this:



What I would like to happen is for the red bar to extend all the way to the left margin of the screen but for the content inside the bar to remain aligned with the "S" of Solutions like it does now. I also want the edge of the red bar to remain right aligned with the right edge of the big white text as it does in the image.

At the moment the whole content is inside the "centered-container" which has a fixed with of 980px and the bar is currently a fixed width (775px). The problem is that the gutter width outside of the "centered-container" is variable depending on the screen resolution and because the bar is semi-transparent I can't just put a red box background image on the <header> because it would show up where this overlaps with the red container.

I thought about moving the whole thing outside of the "centered-container" but I could not figure out how to line the content up with the left of the "S" or how could set the correct width so the box aligns with the right edge of the text if I did this.

Is Javascript the only way I can achieve this layout or does anyone know a way to do it with CSS?

Thanks very much,

Olly

[OllyL]

Just as an addition, I can achieve the desired layout with the following JS:

$(document).ready(function() {
var width = window.innerWidth;
width = width - 980 / 2;
$(".header-bar").css({
left: (width * -1),
paddingLeft: width + 15
});
});


(Where 15 is the left padding on the content inside the bar)

Ideally I would like to do this in CSS though rather than hack it in with script.

Thanks,

Olly