2017-03-01-Floating-Divs.md

layout	title	subtitle	bigimg
post	Floating Divs and fixing stuff	Float	../img/analog.jpg

How to fix a layout which contains divs containing only floated elements

Suppose you've got 2 divs, one containing floating divs and one with a border

{% highlight html %}

1

2

3

4

5

1

2

3

4

5

{% endhighlight %}

But look it's broken!

<script async src="//jsfiddle.net/alexwas/x049de9L/embed/"></script>

Fix is pretty easy. We create an empty div and apply a clear:both style to it and place the div between the previous two divs.

{% highlight html %}

{% endhighlight %} <script async src="//jsfiddle.net/alexwas/95m3fe2g/2/embed/"></script>

And that's it!