Hey everyone, I'm facing an issue that I can't seem to figure out. I know it's probably something very simple, but as a beginner, I'm struggling...
Every time I use the float:left command, the elements with classes .con-icon and #con-info escape the boundaries of the container #contain and overlap with the next div called #test (the one in dark red). How do I make sure they stay within the borders of #contain?
You can find the code here: http://jsfiddle.net/3eoj06b3/.
<section id="contain">
<h1>Contain</h1>
<div id="con-info">
<div class="con-icon">
<h2>1</h2>
<h2>1</h2>
<h2>1</h2>
</div>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
<div id="test"></div>
</section>
The CSS code is provided in the link.
I'd appreciate any help or suggestions on what could be potentially causing this issue. Thanks!