Элемент плавает справа, а не слева с помощью css

Я пытаюсь заставить эти элементы перемещаться в правильном направлении. Box1, Box2 перемещаются влево, а Box3 — вправо. Затем ниже я пытаюсь сделать так, чтобы homeBlog плавал влево и выравнивался под Box1 со столбцом 2 справа, а столбец3 плавал прямо под box3. Моя проблема заключается в том, что homeBlog должен перемещаться влево и выравниваться под Box1, однако он размещается прямо под box3, а столбец2 и столбец3 полностью не в порядке. Что я здесь делаю не так??

См. код ниже:

.box1{ width:32.6%; 
height:250px;  
float: left; 
margin-right:1.2%;  
border-radius:10px; 
border:1px solid #CCCCCC; 
padding-right:5px; 
padding-top:5px;} 

.box2{padding:3px; 
width:31%; 
height:250px;   
border-radius:10px; 
border:1px solid #CCCCCC; 
float:left; } 

.box3{ padding:0px; 
width:32%; 
height:250px;   
border-radius:10px; 
border:1px solid #CCCCCC; 
float:right; }

.slide { margin-left: auto; 
margin-right: auto; 
margin-top: 0; 
width:950px;}



.column2{width:300px; 
height:auto; 
margin-bottom:5px; 
float:left; 
margin-top:5px;}

.column3{width:300px; 
height:auto; 
margin-bottom:5px; 
float:right; 
margin-top:5px;}

.homeBlog{width:300px; 
height:auto; 
margin-bottom:5px; 
margin-top:5px; 
margin-right:15px; 
float:left; 
background:#CCCCCC; 
height:300px;}

.banner{width:950px; 
height:300px; 
background:#000000; 
margin-bottom:5px;}

.newRow{ width:950px; 
margin-left:auto; 
margin-right:auto;}



<body>
<div class="slide">

<div class="banner"></div>
<div class="box1" style="text-align: center;"><span style="font-family: 'arial black', 'avant garde'; font-size: x-large; color: #993300;"><strong>Fees and Promotions</strong></span></div>
<div class="box2"></div>
<div class="box3"></div></div>

<div class="newRow">
<div class="homeBlog"><strong>News and Updates</strong></div>

<div class="column2">
<p style="text-align: left;"><span style="font-size: large; color: #800000; font-family: arial, helvetica, sans-serif;"><strong>Comments</strong></span></p>
<span style="font-family: arial, helvetica, sans-serif;"> <a href=""><img class="alignnone size-full wp-image-1199" alt="lions" src="" width="280" height="213" /></a></span>  <span style="font-family: arial, helvetica, sans-serif;"> <a href=""><img class="alignnone size-full wp-image-1199" alt="lions" src="" width="280" height="213" /></a></span>

</div>

<div class="column3"><span style="font-size: large; color: #800000; font-family: arial, helvetica, sans-serif;"><strong>Quick Contact</strong></span> <span style="font-family: arial, helvetica, sans-serif;">[contact-form-7 id="394" title="Quick Contact"]</span></div>
</div>
</body>

html css css-float
person user3169151    schedule 12.03.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Добавьте clear: both; в .homeBlog. Я подозреваю, что он застревает на .box2 при попытке плавать влево.

person Peter Herdenborg    schedule 12.03.2014
comment
Да, он действительно застрял, только что понял, что box3 не такой же высоты, как другие, поэтому он застрял на втором поле. Здоровья, приятель! - person user3169151; 12.03.2014

arrow_upward
0
arrow_downward

Это может понадобиться:

<div style="clear:both"/>

Это то, что вы хотите?

http://jsbin.com/yegesume/1/edit

person nowhere    schedule 12.03.2014