Get a free trial // Grow your CSS skills // Land your dream job


  • # January 29, 2013 at 9:11 am

    It’s me again and I’m getting desperate xD
    I’m trying to solve this, but it’s impossible:

    I want a website with a seperated background (50%|50%, in this example black|white). Then I want to add a content-div, with a certain width ON TOP of this div, not under it, like in this example (

    I hope its understandble… -.-

    # January 29, 2013 at 9:31 am

    Hi Saifadin,

    This will work (just replace your left and right classes with the below):

    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    background: #FFF;

    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background: #000;

    Also – you don’t need to wrap these – just put them at the top of your markup.

    How it works –
    position: fixed fixes the div in place so it won’t move.
    top : 0 pins it to the top
    bottom: 0 pins it to the bottom
    The div will automatically stretch to fill the space if you position it like this – this is quite a useful trick – you can set top, bottom, left and right to 0 and the element in question will fill the screen – handy for overlays etc will work on a positioned element (fixed or absolute)

    left or right: 0 pins it to the left or right
    left or right: 50% takes it halfway across the screen

    background – just giving it a colour

    z-index – this gives it a stack position -1 ensures it is under the content elements which have z-index auto (always a positive integer) unless you set them otherwise

    Bear in mind this background will always be in place – i.e. it won’t scroll.

    Hope that helps

    # January 29, 2013 at 9:35 am

    Use a linear gradient as a background?

    # January 29, 2013 at 9:36 am

    As always using absolute position should be your last option.

    # January 29, 2013 at 2:38 pm

    Good call on the linear gradient. It won’t work on IE9 and below though.

    # January 29, 2013 at 3:02 pm

    >It won’t work on IE9 and below though.

    Fallback with a bg png though.

    # January 30, 2013 at 6:38 am

    That’s great guys, you are awesome. I used Linear gradient, like Paulie_D stated. Maybe I should read more about gradients ;)

    Another question:

    I want the text-area of the search to open, after I click on the search-button. To sum it up:

    click on search-button -> text area ease-in to the left

    Does that work with CSS or whats the best way? :/

    # January 30, 2013 at 10:52 am

    Are you using jQuery on your site? If so you could simply toggle a class on click:

    // Add a class to the search icon when clicked
    $(‘#viewSearch’).click(function() {

    Then hook your animation to this class which you can do by changing the width from 0 to 50% for example and transitioning the change

    Example on CodePen here:

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed