How to align three blocks on the front page using CSS

Question

I've got three blocks on my front page and I want them to be centered and aligned.

"About us" block is to be aligned to the left side of the front page what I managed to achieve. The other two blocks are to be aligned to the right side of the front page and one above the other what I managed to achieve as well.

However:

1. Different browsers show different results which is caused by the reference of the language switcher block I guess. It is moving my right hand side set of blocks up and down. IE is showing the result I would like to achieve (the example: test site).
2. I would like to be able to reference language switcher block to the content region which is not the case right now and I am not sure how to do it.

Can someone help or guide me into the propriate direction?

Thanks and regards

Answer 1

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):

<div id="content">
       <div id="blocks-container">
             <div id="left-block">
                    //In here load the slider block and display in here
             </div>
              <div id="right-block">
                     <div>
                    //In here load the top right  block and display in here
                     </div>
                     <div>
                     //In here load the bottom right  block and display in here
                     </div>
             </div>
       </div>
</div>

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 > 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.