У мене є 3 DIV, які знаходяться в межах "містить" DIV. Контейнер
шириною 960px і 3 DIV мають ширину 45%, 10% і 45%. І всі вони
"плавали вліво". Досить простий?
Well for some reason the 3 DIVs won't align correctly, i.e. next
to each other. The middle DIV is always above the DIV on the right.
What am I doing wrong? Here's a fiddle to illustrate what I mean:
http://jsfiddle.net/m2Zzw/2/
HTML:
<div id="mTopContainer">
<div class="mTopInner clearfix">
<div class="leftBlock floatLeft">
[Customer], we have found 126 results for you, which are based on a mortgage of £50,000 over a period of 17 years.
The mortgage will be secured against a property with a value of £100,000, meaning that you will be borrowing 50% of the property's purchase price.
We used your answers to find the lenders more likely to accept you and the rates they are likely to offer you – the rates and lenders may therefore differ from those featured on our homepage. The actual rates offered to you may differ from that shown.
</div>
<div class="middleBlock floatLeft"> </div>
<div class="rightBlock floatLeft">
Your next step
Get advice from one of our expert mortgage partners, Sensible Financial Solutions – FTB Prime and take the hassle out of finding the right mortgage for your needs.
Any advice provided is not given either by or on behalf of [company].
</div>
</div>
</div>
CSS:
#mTopContainer { width:100%; height:250px; border:1px solid #BDD7EF; margin-top:15px; }
/*.mTopInner { height:250px; background: url('/Images/Mortgages/restoplady.png') top right no-repeat; } */
.leftBlock { width:45%; }
.middleBlock { width:10%; border-right:1px solid #BDD7EF; margin:0 auto; }
.rightBlock { width:45%; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
/* For IE 6/7 only */
.clearfix { *zoom: 1; }
.floatLeft { float:left; }