Hi,

I am sure you all know this, but i will make a short description anyway. It is about the code below:

<div id="container">
	<img style="display: block; float: left;" src="http://placehold.it/468x60" alt="" />
	<p class="element" style="margin-top: 30px;">
		Sed ut perspiciatis unde omnis ...
	</p>
</div>

an element containing a floated element and a block element wrapping around the float, but you want that the block element to be lower than the floated one, so you set a margin on the block element, but the floated one is pushed by the margin… annoying. ( ex. demo 1 ).  So the simplest solution is to set a padding of 1px on the same direction as the margin on the container.

<div id="container" style="padding-top: 1px;">
	<img style="display: block; float: left;" src="http://placehold.it/468x60" alt="" />
	<p class="element" style="margin-top: 30px;">
		Sed ut perspiciatis unde omnis ...
	</p>
</div>

see it on demo 2 .