The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS search-form Re: search-form


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