Having trouble clearing floats on my left-container and right-container using a div, but it's not working as expected.
Both the left and right container are dynamically populated with Jquery after the document is loaded.
Any suggestions on how to resolve this issue?
CSS
#container{
height:75%;
background-color:white
}
#left-container{
height:100px;
width:23%;
float:left;
border-right:1px #254117;
}
#right-container{
height:100px;
width:76%;
float:left;
}
HTML
<div id="container">
<div id="left-container">
{% include "leftcontainer.html" %}
</div>
<div id="right-container">
{% block right-container %}
{% endblock %}
</div>
<div id="float-container" style="clear: both;overflow:hidden"></div>
</div>