I'm trying to float an element to the right, and this element is inside a div with no set size. The problem is that when you float the element p to div does not accompany the content.
Follow the HTML code:
<div id="divPrincipal">
<p>Conteúdo dentro da div</p>
</div>
And the CSS:
#divPrincipal{
border: 1px solid red;
}
#divPrincipal p{
border: 1px solid blue;
float: right;
}
How to solve this?
You need to clear the float for the parent element to assume the size of your children with float . There are several ways to do this, but the most modern one today would be using something like this solution :
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
Where this CSS class would be added to your parent element, the HTML would look like this:
<div id="divPrincipal" class="cf">
<p>Conteúdo dentro da div</p>
</div>
Example: FIDDLE