overflow and floats clearing

by audetwebdesign

HTML

<h3>Case 1:</h3>
<div id="container">
   <div id="left-container">
    {% include "leftcontainer.html" %}
   </div>
   <div id="right-container">
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
   </div>
   <div id="float-container" style="clear: both;overflow:hidden"></div>
</div>
enter image description here

<h3>Case 2:</h3>
<div id="container">
   <div id="left-container">
    {% include "leftcontainer.html" %}
   </div>
   <div id="right-container">
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
        <p>{% block right-container %}{% endblock %}</p>
   </div>
   <div id="float-container" style="clear: both;overflow:hidden"></div>
</div>
The inflow...

CSS

html, body {
    height: 100%;
}
#container{
   height:75%;
   background-color: yellow;
}
#left-container{
   height:100px;
   width:23%;
   float:left;
   border-right: 1px solid #254117;
}
#right-container{
   height:100px;
   width:76%;
   float:left;
   border-right: 1px solid #254117;
}