css - Why won't these DIVs align correctly? -

I have 3 DIVs which are within the "containing" DIV. I container is 960 px wide and 45% , The width of 10% and 45%. And they're all left "left" is simple enough right?

For some reasons, 3 DIVs will not be correctly aligned, i.e., with each other. Middle DIV is always above the DIV at the right I am doing wrong? I understand what I mean:

HTML:

  & lt; Div id = "mTopContainer" & gt; & Lt; Div class = "mTopInner clearfix" & gt; & Lt; Div square = "left float left left" & gt; & Lt; P & gt; [Customer], we have got 126 results for you, which are based on a mortgage of £ 50,000 over a period of 17 years. & Lt; / P & gt; & Lt; P & gt; The mortgage will be secured against the property with a value of 100,000 pounds, which means that you will borrow 50% of the purchase price of the property. & Lt; / P & gt; & Lt; P & gt; We look forward to accepting more lenders to use your answers and they accept the rates offered by you. Therefore rates and lenders may be different from those shown on our homepage. The actual rate proposed for you may be different from those shown. & Lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "middleBlock float left" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; Div class = "right block float left" & gt; & Lt; H6 & gt; Your next step & lt; / H6 & gt; & Lt; P & gt; Consult with one of our specialist mortgage partners, sensible financial solutions, FTB Prime, and face the hassle to find the right mortgage for your needs. & Lt; / P & gt; & Lt; P & gt; Any advice provided is not given by or on behalf of [Company]. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 CSS:  
  #Mtek CONTAINER {width: 100%; Height: 250px; Limit: 1 px solid # BDD7EF; Margin top: 15px; } /*.mTopInner {height: 250px; Background: URL ('/ images / mortgage / restoplid page') Top right non-repeat; } * / .leftBlock {width: 45%; } .middleBlock {width: 10%; Border-right: 1px solid # BDD7EF; Margin: 0 auto; } .rightBlock {width: 45%; } .clearfix: first, .clarfix: after {content: ""; Display: Table; } .clarfix: after {clear: both; } / * IE 6/7 only * / .clearfix {* Zoom: 1; } .floatLeft {float: left; }    
 
 
 use it  
  .middlebllock {box -Sizing: border-box; -One-box-sizing: border-box; Because you're using the  range  and  width     Strong>   
 is used for  width + border  ==>  The total width of your div   
  box-size  is  css3   properties