How to rearrange/arrange the divs in css?

I would like to do a page like this : http://ift.tt/1MstjHc with this parameters :

Background: red
header: 70px tall, black background, is always at the top of your browser       (fixed position), total width
Content: 500px wide, centered in height matches the contents of a blue background, the browser scrolljának top position 30px from the header
Left column: 300px wide (including frame), 550px high and 25px from the container to containing a yellow background, black border 5px
Right column: 125px wide, 200px high, white background, 25px on the container to contain'

I just did this : http://ift.tt/1VmLssZ

With this code :

*{
margin:0;
padding:0;
}


html, body
{
height: 100%;
width: 100%;
background-color: red;
}

#fejlec{
height: 70px;
width: 100%;
background-color: black;
background-position:top;
background-attachment:fixed;
position: fixed;
}

#kek{

background-color: blue;
width: 500px;
height: 100%;
position: absolute;
top:170px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#sarga{
background-color: yellow;
width:260px;
height: 550px;
padding:20px;
border:5px solid black;
position: absolute;
top:-25px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
float: left ;


}

#feher
{
background-color: white;
width:125px;
height: 200px;
padding:25px;
}

I don't know who to do arrange divs with css, so it could be very useful, if somebody could help me.