Odtnhj

first of all is there a good tutorial about positioning elements which really explains what's 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;

Here is JSFiddle that demonstrates your layout without floats using position absolute.
In my experience position absolute is more flexible and made for this kind of layouts, especially when you want to dock elements using top, right, bottom and left.
There are circumstance where you need to fallback on using floats, but in this case it is not needed.

Use floats to float things around it and position absolute to dock things.

The HTML

<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>

The CSS

#Header 
 background-color: red;
 height: 200px;

#Column1 
 position: relative;
 background-color: #FFFFFF;
 top: -140px; left: 70px;
 width: 280px;
 min-height: 500px;

#Column2 
 position: absolute; 
 background-color: #00FF00;
 left: 350px; top: 200px; right: 0;
 min-height: 360px;
​

Update Remove display:none from the .more class in the JSFiddle and see that the containers are flexible as well.

I'm just gonna spitball here:

HTML

<div id="red"></div>
<div id="white"></div>
<div id="green"></div>

CSS

#red 
 width: 100%;
 float: left;
 height: 100px;
 position: relative;
 background-color: #f00;

#white 
 width: 20%;
 float: left;
 margin-left: 4%;
 margin-top: -40px;
 position: relative;
 background-color: #fff;
 height: 400px;

#green 
 width: 76%;
 float: left;
 position: relative;
 background-color: #0f0;
 height: 400px;

Does it work?

You could just use a minus margin

http://jsfiddle.net/gAKAK/

This is kind of a complex request, so don't feel bad that you weren't able to figure it out. You shouldn't have to set the width of anything other than your sidebar for this solution; my solution relies on an uncommon use of overflow: hidden to achieve this.

http://jsfiddle.net/Wexcode/uBQEu/

HTML:

<div id="header"></div>
<div id="white"></div>
<div id="green"></div>

CSS:

#header 
 background: red;
 height: 70px;
 border: 1px solid #000; 
#white 
 background: #fff;
 float: left;
 margin: -30px 0 0 70px;
 width: 100px;
 height: 230px;
 border: 1px solid #000; 
#green 
 background: green;
 overflow: hidden; 
 height: 201px;
 border: 1px solid #000;
 border-top: 0;
 border-left: 0;