Нижний колонтитул перекрывает перекрывающиеся divs - CSS

Question

Float Image и div соответственно слева и справа. После того, как плавающий нижний колонтитул смешивался с изображением и div.

HTML

<img src="images/AboutUs.jpg" class="about_us" alt="about us" /> 
<div id="description"> 
djfdjfj 
</div> 

CSS

.about_us { 
border: solid 1pt #efefef; 
-webkit-border-top-left-radius: 20px; 
-webkit-border-bottom-left-radius: 20px; 
-moz-border-radius-topleft: 20px; 
-moz-border-radius-bottomleft: 20px; 
border-top-left-radius: 20px; 
border-bottom-left-radius: 20px; 
width: 30%; 
margin-left: 5px; 
float: left; 
border-collapse: collapse; 
} 

#description{ 
background-color: #ffffff; 
width: 69.2%; 
float: right; 
border-collapse: collapse; 
} 

сноска

footer{ 
width:100%; 
border-width:1px 0px 0px 0px; 
border-style:solid none none none; 
} 

это изображение

Что там происходит?

Answer 1

Попробуйте добавить это на колонтитул CSS

footer{ 
float:left; 
} 

Answer 2

Вы должны очистить поплавок перед переходом к следующей строке. например,

<img src="images/AboutUs.jpg" class="about_us" alt="about us" /> 
<div id="description"> 
    djfdjfj 
</div> 
<div style="clear:float;"></div> 

или вам необходимо разделить родительскую ширину div ко всем дочерним поплавковым divs без ошибки 1px. как это

.about_us {width:30%;} 
#description{width:70%} 

попробовать любой из которых подходит к вам

Answer 3

всякий раз, когда вы плывете DIV или изображений .. то вы должны очистить Так что другой DIV не может быть неоднозначным. Очистить свойство не позволяет плавать рядом с этим свойством.

Пример:

<div class="main"> 
<img src="images/AboutUs.jpg" class="about_us" alt="about us" /> 
<div id="description"> 
djfdjfj 
</div> 

<div style="clear:both"></div> 
</div>