Making divs stay the same place when resizing window

Question

First of all im new programmer, so dont judge quickly :). Anyways ive been struggling with this problem for some time now. The problem is when im resizing(scaling whatever) the window, it messes around with ALL my elements. When resizing my website, you should just see less, than before. Not move around elements.

Here's the code:

HTML:

<div id="leftblock">
   </div>



<div id="rightBlock">
</div>

CSS:

#leftblock {   

 margin-left: 20%;
 background-color: red;
 float: left;
 height: 100px;
 width: 3px;  

}



#rightBlock { 
 margin-right: 20%;
 background-color: red;
 float: right;
 height: 100px;
 width: 3px;


}

To be sure what i mean, test the code in an editor, and then try resize the window.

jsFiddled here

Answer 1

If you don't want them to move around, place the elements in a fixed size parent container.

DEMO

CSS

#container {
 width: 1000px;
}

#leftblock {   
 margin-left: 20%;
 background-color: red;
 float: left;
 height: 100px;
 width: 3px;  
}

#rightBlock { 
 margin-right: 20%;
 background-color: red;
 float: right;
 height: 100px;
 width: 3px;
}

HTML

<div id="container">
    <div id="leftblock">
    </div>

    <div id="rightBlock">
    </div>
</div>