CSS positioning 2 shifted colums
===

first of all is there a good tutorial about positioning elements which realy explains whats going on. I've read multiple but can't get a grip on it.

the specific problem I have is as follows:

I have a header div-element (in red) with underneath 2 columns(white and green). Normally with float:left; i can position the elements next to each-other. But now I want one (the white one) to move a bit over the header als shown.

with relative positioning with a negative top value I can get the white one at the right position but how to position the second column. When adjusting the browser size it al gets messed up.

    #Column1
    {
      float: left;
      position: relative;
      top: -140px;
      background-color: #FFFFFF;
      left: 70px;
      width: 280px;
      min-height: 500px;
      padding: 10px;
    }
    
    #Column2
    {
      float: left;   
      width: 800px;
      background-color: #00FF00;
    }


![DIV positions graphically explained][1]


  [1]: http://i.stack.imgur.com/jcoVY.png