simple design, big (bug-)challenge?

Can we get an image? I'm having a hard time visualising this

of course you can

the grey part should be the site. left of the site one colour, on the right of it another

It should be safe to use a single colour background image. Make it very wide, two or three thousand px should be sufficient. If the image is only 1px high and you use a PNG or a JPG the size of the final image will be quite small. I'd expect under 1k.

body { background: url(images/background.png) 50% 0 repeat-y pink; }

#content {
width: 980px;
margin: 0 auto;
background: gray;
}

Whatever you do, you don't need an element for each colour. The outer container (BODY?) can take one background colour. The others will overlay it.

I consider that to be a kind of a dirty (but maybe practical) work around, not a solution.

It can be done with tables, so I'd say it should be doable with divs.

Sheesh, can we have a nicer attitude. The appropriate response to that post is, "well if you know how it is doable, go do it".

It is a solution. And its one that doesn't introduce fluff elements into your HTML. That is it keeps the background as a background. Some would consider having fluff DIVs polluting your content a work around not a solution.

My initial reaction was also to have a left aligned vertically repeating background image of the left colour and a standard background colour beneath that for the right hand side.

The way I see it you know your middle columns width is 980px right? Make the background solid colour image the same width. That way if its centred and there is 1px space either side they will see the appropriate colours either side, but they can afford to stretch their browser window 980px * 3 (2940px) wide before it breaks right?

J

oh I didn't mean to insult anyone or something english isn't my native language so maybe I didn't bring it very well. sorry.

I still don't see it as a solution. Years ago you would have said it with a 1500px image, but nowadays we already have 2400px resolutions, so it's a time-based solution.

I said 2000 - 3000. Given that is 50%, you have quite a few years before monitors hit 4000 or 6000px - and when they do, you still need your visitors to have their browsers set to full screen width. My screen is 1920px wide, I don't use anything at full width. But whatever, make an image and see how much space it takes up. Make it 10000px wide and set the palette to 2 colours if you are really concerned.

Fwiw, its a pretty simple thing to achieve in DIVs that support CSS2.1 properly. However IE6 will cause problems. The problem with your initial attempt are:
- using floats or position - no way to get heights to match.
- using margins of -50%. use -490px.

This is a CSS2.1 solution without a background image. It won't work in IE6 for browser windows widths below 980px. The left hand edge of the content is not visible, which is a pretty serious flaw. I don't know if there is any way to work around that, but then why bother when there is a ready made, simpler solution that does work x-browser!!!

Thanks
much appreciated, I'll see what I can do

..

is it me or doesn't this work?

www.iswmetaalconvenant.nl/index3.php

what do you mean by work? I see a grey box with pink all around it. ff2 on xp.

I don't really see how a background image isn't a solution for a GRAPHICAL design problem. css is neat and all but it's not at all in a place to meet all visual demands of a web page without using images. that's why it supports them.

check the link
it's all pink, there's no orange.

however, it is as neat as defining a height for a div containing text. you can be pretty sure the text won't overflow, but it _can_ overflow, and when it does your design is broken. same goes for this solution.

I do consider the image a better solution than the negative margins, because IE6 might hide some content which is, as chris stated, a bigger flaw.

but anyway

I tried the code chris gave me, but it doesn't seem to work.. for one reason or another the background-image won't move 50% from the left..

Ooops. Err sorry

-50%. image for right hand colour.

I see that there is only pink. that's why I asked. looks like there's a big pink bg image applied so one would expect to see only pink. edit: now I see the other orange...

I'm not sure that I'd compare defining container heights to width of backgrounds on the extremities. I mean, what does broken mean? some colors on the edges of your 3000px monitor not lining up? c'mon. a 2 color, 8192px wide gif is 215bytes. go for it.

Chris' code is fine. with a 2 color gif, divided up the center, keep the bg transparent and set the left at 50%. should work fine.

Will

My code isn't for a two colour image, but for a single colour image. The background-colour provides the other colour. Background position moves the image so that it only covers half the element.

-50% works better, but the end of the image doesn't seem to center:
http://iswmetaalconvenant.nl/index3.php

I caught that difference after my post. I mean, "chris' code almost works fine..." I noticed the non-centering while messing with it in firebug. couldn't really suss out why. the centering percentage changed based on the browser width. I wonder if applying it to the HTML element would work.

pardon me, I missed the 'challenge' part of this. now I'll have to play.

My misinterpretation/misrecollection of the spec. x% refers to x% of image dimension matched to x% of element dimension. I was thinking it matched x% of image dimension to left edge of element. Syrupcore was right, use a two colour image and 50% (or center) for the background-position.

ok yeah I already did that in the original one, just was curious about how it should have been.

thanks

I actually had trouble getting a 2 color image to work last night. if the image was wider than the browser viewport, it wouldn't center. I'm not sure what I was doing wrong. If I made a new image that was say, 600px wide, centering worked fine. I feel like I've done it a bunch before but couldn't get it to work. I tried using a strict doc type and all manner of things but still it came up off center. bizzaro.

I meant to play around with a wide border-left/right in a wrapped container where the wrapper container was 100% width + overflow: hidden. sprinkle in some negative margins and perhaps it could be done without images... I dunno.

will

Can you show us what you tried? There shouldn't be an issue in any browser that I'm aware of.

cheers,

gary

Good luck with that, but I reckon you're back where I was with the padding method. You have to wrap the content element to match height. If you wrap the element, you can't center it, at least not without messing with element widths. If you mess with element widths you have to use min-width - and therefore IE6 compatibility is not possible.

hrmmmm. Not sure what I'm doing wrong.

http://luktown.org/random/50percent/

http://luktown.org/random/50percent/

doh. the images weren't actually centered. working now... I thought I was losing my mind!