CSS style formatting - css

Question

My footer and its content do not re-position proportional to each other when I reduce the height of the footer.
CSS code:
#footer {
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right;
height: 5px;
}
#footer p.left {
float: left;
text-align: left;
margin-left: 5px;
}
#footer p.right {
float: right;
text-align: right;
margin-right: 5px;
}
And this is what I am getting:
Anything I should do to resolve this?

Answer 1

Remove height and add overflow: hidden:
#footer
{
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
overflow: hidden;
}

Answer 2

<div style="clear:both;"></div>
just before footer div ends and also try removing height from footer

Answer 3

Well, you're not adding any context and any HTML markup. But this is important:
#footer {
clear: right; /* why are you doing this? **/
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right; /* why are you doing this? **/
height: 5px;
}
take a look at those commented lines, which quite probably you don't need at all.
Now, into your issue, you can use two options:
1) clear floats by using the "clearfix" method: simply add an empty div that clears the floats of preceding elements, like this:
<div class="clearfix"></div>
and then in CSS:
.clearfix{clear:both; float:none;}
Obviously you can use this as many times as you want since you're using re-usable classes.
The option 2 is as follows:
#footer p.right:after {content:'';clear:both; float:none; }
What we do here is to add some "empty" content, yet we assign it a "clear:both" property to clear everything, more or less as if we have added that div in option 1
Of course option 1 is way better, but well, there you go

Answer 4

You're using float to position elements, which means that the height of the floated elements are set to 0, just like if you're using positioning: absolute. DON'T use floats! Use flex.
#footer {
background: #d1dceb;
padding: 20px;
width: 70%;
display: flex;
margin: 0 auto; /* center element */
}
#footer p {
flex: 1 1 auto; /* fill up the entire available space */
}
#footer p.right {
text-align: right;
}
<div id="footer">
<p>Left footer element</p>
<p class="right">Right footer element</p>
</div>