CSS float property problem

CSS float property is very important in web designig. What is float property in CSS?, the float property is a CSS property for placing element to 2 column in basicaly. But sometimes float property is a problem on web designing, the float property is make a floated element is placed outside of the element. How to solve that?, read this article about float problem.

Demo and example

Float property makes the ELEMENT1 is placed in outside of his parent, like this example.

ELEMENT1

Solved float property is like this example.

ELEMENT1

So how to solve that?, it's easy you just need to add clear: both before and after the floated element and inside the parent. Like this example below.

Before:

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="float: left;">
ELEMENT1
</div>
</div>

After:

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="clear: both;">
</div>
<div style="float: left;">
ELEMENT1
</div>
<div style="clear: both;">
</div>
</div>

Or like this if you have two floated element in a row

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="clear: both;">
</div>
<div style="float: left;">
ELEMENT1
</div>

<div style="float: right;">
ELEMENT2
</div>

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

you just need to add clear both, remember that!