Two-colored background

[stygyan]

Hello guys. I’ve been a follower of this blog for some time and I finally gathered some courage to post in here.

Thing is, there’s something I’ve been wondering for a while, and I don’t even know it if is possible.

I’m about to redesign my blog, and one of the ideas I have involves having a main div in which all of my text and images are. Problem is, for this design I’ve on mind to be effective, it needs to be divided in two: 300px black, and 600 white. Until here I find no problem at all, the problem comes when I want the left gap (the div is centered) to be black, and the right one to be white, so it keeps using the same colour palette.

Is that possible?

Other possibility is to make the background white and the main div aligned to the left, now that I think about it. But then I’d like to ask: is it possible to give one of the divs a width in pixels, and the other one something like "you just fill up the available space"? I know it was possible with tables and frames, but I have never tried that with CSS.

Thank you all in advance.

[Rob MacKay]

sorry – that just flew over my head – you got any live examples so we can put your description to pictures :) Im just too visual a person for guessing what you mean :)

[stygyan]

Sure.

[img]http://imgur.com/3V7NL.png[/img]

That’s what I wanted to do.

Anyways, a way to solve it had just come to my mind – it’s not perfect, and it’s not working right now (sodomy non sapiens if I know why)

My idea is, make the background black, and add to it a full white image, starting at 300px to the left, sprite-like. I’m trying it now, and I don’t know why it doesn’t work.

This is the code:

body {
width:900px;
background: black url(‘white.png’) 300px 0px;
margin:auto 0 auto 0;
}

Btw: this solves the main div problem, but I don’t know how to solve the general HTML background problem; How could I say to it "use whatever space you’ve got plus 300px"? I was thinking of doing just a general 50%.

[stygyan]

I think I got the error pointed and solved. I can’t use repeat-x if I’m to position the image x-wise.

Anyway, I don’t know how to solve the html background thing: If i give it 50% it doesn’t work as expected, it just centers the image.

[stygyan]

Yay, it’s done.

I’m doing it aligned to the left, this way:

body {
width:960px;height:500px;
background: black url(‘white.png’) repeat-y 240px 0px;margin:0px;padding:0px;
}

Now I’ve got only one div, and that’s what I wanted, really.

It’s for a wordpress blog (actually blogsome), and I want to use the black part for a first image (aligning it absolutely to 0 0), and putting all the text with a 240px margin, so it goes in a two column layout without it actually being two columns.

Thanks for all the help, it’s been an educay-shon.

PS: Don’t you think that, whenever you try to explain something, it helps you to think better?

[Soh Tanaka]

Hey Stygyan~

I wrote a tutorial on something similar, maybe it can help:

http://www.sohtanaka.com/web-design/ach … -with-css/

:-)

[Author]

Posts