How to align three blocks on the front page using CSS
Well, after looking at your code I concluded that your css codes are terrible! you may use this code (I didn't test it but it should work or at least a few modifications will make it to perfectly match what you need):

&lt;div id="content"&gt;
       &lt;div id="blocks-container"&gt;
             &lt;div id="left-block"&gt;
                    //In here load the slider block and display in here
             &lt;/div&gt;
              &lt;div id="right-block"&gt;
                     &lt;div&gt;
                    //In here load the top right  block and display in here
                     &lt;/div&gt;
                     &lt;div&gt;
                     //In here load the bottom right  block and display in here
                     &lt;/div&gt;
             &lt;/div&gt;
       &lt;/div&gt;
&lt;/div&gt;


This is CSS

#content{
       text-align:center;
       width:100%;
       height:auto;
       display:inline-block;     
}
#blocks-container{
       margin:auto;
       width: 975px;
       height:auto;
       display:inline-block;     
}
#left-block{
       float:left;
       width: 760px;
}
#right-block{
       float:right;
       width: 215px;
}
#right-block &gt; div{
       clear:both;
       width: 100%;
      float:left;  
}    


Never use margin to align elements to the right, because the margin is calculated based on the parent which in your case is the browser, so If you resize the browser, the browser will try to move the elements to regard the margin.

I recommend you strongly to forget about the DIV and float, try to learn how to work with flexbox it is very easy to use.