Hello.
I have a centered layout 980px width.
In the header should be a line which goes out of the wrapper div to the border of the browser (see the attached screenshot)
What would be the best way to define this with css/xhtml?
I know I could make a wrapper parent div and add it as a background which would start at the proper position and make it repeat-x but is there any better way to do this?
Anyone has an idea?
Many thanks in advance!
Despite the screen shot, it’s not really clear to me where this line needs to be in relation to the other content, and whether it is meant to be on top of everything or site behind other things.
Hi,
You could do the orange background as a repeating image on the body element or on a wrapper but then you would have trouble lining it up and means that the height would also have to be fixed.
A better way is to remove the 980px wrapper and do the page in sections. This would allow you to have a header-wrapper which is 100% wide with a min-width of 980px and holds a full width repeating background. Then inside this 100% wide header-wrapper you just nest the actual header element as a 980px wide div and centred with margin:auto. It’s this inner div that holds the actual header content.
Then after the header-wrapper html you just create another 980px centred wrapper that follows on to contain the rest of the centred site. It just means that whenever you want a 100% stretch you finish the wrapper and place a 100% wide element with and inner nested fixed width element as required.
It’s much the same as the header and footer used in this more complicated layout.
Yeah, thats exactly what I’ve been thinking of.
One problem is that this background should only be extended in the right side of the navigation, not through the whole layout. Do you have any idea how it would be possible to set where it should start?
Thanks again.
Do you mean something like this?
http://www.pmob.co.uk/temp/fluidside-fixedcentre.htm
It’s a little more complicated.
Yes, thats exactly what I’ve been looking for.
Many thanks for this example, it enlightens how this can be done.
Do you maybe know if its possible to keep the transparent background on the opposite site and the content place? Is it possible to not use colored divs to cover the background?
I have a gradient background on body property so I should somehow resolve this issue.
I’ve tried to put background-image and set it to top right on the wrap div which would draw the line, but I cannot control the length of the line as I set repeat-x.
If you want the left side transparent then reverse the way shown in my demo by placing the background on the 50% float and let the wrap element be transparent. Then reverse the directions of the floated elements.
Here’s another example which is what i think you are asking 
http://www.pmob.co.uk/temp/extending-background.htm
If that’s not right then you may need to draw me a picture of the layout you need.