CSS floats и padding

Question

Я пытаюсь создать коробку с двумя столбцами (33%/66%) с CSS, но у меня проблемы с поплавками и отступом. Я хочу разместить значок и весь текст, используя поле с 30-кратным дополнением. «Фактический текст» не показывает никаких дополнений влево, хотя он установлен на 30 пикселей, есть ли очевидная причина?

код используется следующим образом:

Codepen: http://codepen.io/graemebryson/pen/mvBKs

На сайте (дисплеи лучше): http://energy-hypermarket.org/test (@ внизу)

HTML

<div class="fact"> 
<div class="facticon"> 
<img src="/wp-content/uploads/fact.outline.png"> 
<h2>Did You Know?</h2> 
</div> 
<div class="facttext"> 
You could save up to 40% on your energy bills by simply upgrading your Boiler with Energy Hypermarket. 
<a class="offerbutton" href="/boiler-package">Learn more</a> 
</div> 
</div> 

CSS

.fact { 
border: 1px solid rgba(0, 0, 0, 0.09); 
} 

.facticon { 
border-right: 1px solid rgba(0, 0, 0, 0.09); 
float: left; 
margin-left: auto; 
margin-right: auto; 
padding: 30px 30px 0; 
text-align: center; 
width: 33%; 
} 

.facttext { 
padding: 30px; 
} 

Answer 1

thats, потому что ваш facttext не плавает, когда вы проверяете свой код в FireBug, вы увидите, что добавление добавляется, но на уровне блока.

See updated codepen для исправленной версии отступа.

Answer 2

CSS

.facttext { 
    padding: 30px; 
    float: right;  /* -- New -- */ 
    width: 66%;  /* -- New -- */ 
} 

Это даст правильное заполнение на .facttext элемента.