Grow your CSS skills. Land your dream job.

Two-colored background

  • # March 4, 2009 at 11:24 am

    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
    # March 4, 2009 at 11:55 am

    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 :)

    # March 4, 2009 at 12:14 pm

    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%.

    # March 4, 2009 at 12:19 pm

    If I understand what you’re asking correctly, this can only be accomplished two ways.

    1) A super wide image, maybe 2000×1, half being one color, the other half being the other, and centered.

    2) A left aligned website, you use a background image for the left half, and color to fill in the rest.

    # March 4, 2009 at 12:26 pm

    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.

    # March 4, 2009 at 12:44 pm

    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?

    # March 4, 2009 at 1:56 pm

    Hey Stygyan~

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

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

    :-)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".