Re: search-form

[simoncmason]

Hi Saifadin,

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

.right{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 50%;
z-index:-1;
background: #FFF;
}

.left{
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 50%;
background: #000;
z-index:-1;
}

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