CSS positioning 2 shifted columns - html

Question

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;
}

Answer 1

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.

Answer 2

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?

Answer 3

You could just use a minus margin
http://jsfiddle.net/gAKAK/

Answer 4

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; }