Put 5 divs into 2 columns, 2 fixed on the left - html

Question

Long challenge I have had, and I just need to ask for help now.
I have a container for divs:
<div id="container">
<div id="1">Bla</div>
<div id="2">Bla</div>
<div id="3">Bla</div>
<div id="4">Bla</div>
<div id="5">Bla</div>
</div>
Now, div 1 and 2 should be fixed and floating on the left. Width 50%. All the other divs, should be on the right and just continue to float on the right no matter how long and how many divs I add. Width is also 50%.
Im thinking of something like this:
|--1--|--3--|
|--2--|--4--|
|-----|--5--|
|-----|--6--|
|-----|-----|
Any tips? I am just confused on relative and absolute and what is supposed to float where...
I should add, div 1 and 2 should be "scroll" fixed. So position: fixed. Its a bit how the facebook newsfeed is strcutured.
Any help is greatly appreciated. :)

Answer 1

I think i solved your problems. You can use this code for your problem it may be help me.You can add many div in second column but you should use this width:50%; background:pink; float:left; margin-left:50%; css code. You can change background according to you.
Live Working Demo
HTML Code:
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
</div>
CSS Code:
#container
{
width:100%;
height:100%;
}
#one
{
width:50%;
background:red;
}
#two
{
width:50%;
background:green;
float:left;vertical-align:top;
}
#three
{
width:50%;
background:blue;
float:left;
margin-top:-20px;
}
#four
{
width:50%;
background:gray;
float:left;
margin-left:50%;
margin-top:-20px;
}
#five
{
width:50%;
background:violet;
float:left;
margin-left:50%;
}
#six
{
width:50%;
background:gold;
float:left;
margin-left:50%;
}
#seven
{
width:50%;
background:pink;
float:left;
margin-left:50%;
}
Result: