Footer Including Non Footer Items In Footer - css

Question

Sorry if the title doesn't explain it. I have footer and it includes whatever is above the footer. If I have text above the footer (as a sibling of the footer tag) the footer includes the text as part of the footer. Here is my code:
<section id="description">
<div id="description1">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
<div id="description2">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="copywrite">AllKind Corporation, Copyright © 2018</p>
Credits
<p id=disclaimer>By using this site, you agree to our Privacy Policy and Terms of Conditions.</p>
<p id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
</a>
<br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
</footer>
For some reason my footer is including the description (a child of <section id="description">) in the footer. I have narrowed the issue down to having to do with the float: right; tag in the CSS for description2.
Here is my CSS for the description and footer.
/* Description */
#description1 {
text-align: center;
font-size: 18px;
float: left;
padding-left: 100px;
padding-top: 30px;
}
#description2 {
text-align: center;
font-size: 18px;
float: right;
padding-right: 100px;
padding-top: 30px;
}
/* Footer */
footer {}
#copywrite {
text-align: center;
font-size: 13px;
}
#credits {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#disclaimer {
font-size: 15px;
text-align: center;
margin-top: -28px;
margin-bottom: 0;
}
#license img {
float: right;
margin-top: -27px;
}
#license {
font-size: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: -2px;
}

Answer 1

You need to clear the float first. The issue you are facing is due to the floating elements
#description1 {
text-align: center;
font-size: 18px;
float: left;
padding-left: 100px;
padding-top: 30px;
}
#description2 {
text-align: center;
font-size: 18px;
float: right;
padding-right: 100px;
padding-top: 30px;
}
/*This is to clear the float*/
.clearfix {
clear: both
}
/* Footer */
footer {}
#copywrite {
text-align: center;
font-size: 13px;
}
#credits {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#disclaimer {
font-size: 15px;
text-align: center;
margin-top: -28px;
margin-bottom: 0;
}
#license img {
float: right;
margin-top: -27px;
}
#license {
font-size: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: -2px;
}
<section id="description">
<div id="description1">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
<div id="description2">
<div class="container">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
</section>
<div class="clearfix"></div><!--Clearing the float -->
<footer>
<div class="container">
<p id="copywrite">AllKind Corporation, Copyright © 2018</p>
Credits
<p id=disclaimer>By using this site, you agree to our Privacy Policy and Terms of Conditions.</p>
<p id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png"/>
</a>
<br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
</footer>
Note the clearfix element and the class in CSS
Here is the jsfiddle demo: http://jsfiddle.net/GCu2D/4533/

Answer 2

If you want a quick way to separate the section from the footer you can add the following to the CSS ...
#description {
display: table;
width: 100%;
}
Maybe explain a bit more what you want to achieve.
UPDATE: The best way is the clearing the float though as mentioned in another answer.. You can apply the clear: both directly to the footer without adding another DIV

Answer 3

I think you want like this:-
#description1 {
text-align: center;
font-size: 18px;
float: left;
padding-left: 100px;
padding-top: 30px;
width:50%;
}
#description2 {
text-align: center;
font-size: 18px;
float: right;
padding-right: 100px;
padding-top: 30px;
width:50%;
}
/* Footer */
footer {}
#copywrite {
text-align: center;
font-size: 13px;
}
#credits {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#disclaimer {
font-size: 15px;
text-align: center;
margin-top: -28px;
margin-bottom: 0;
}
#license img {
float: right;
margin-top: -27px;
}
#license {
font-size: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: -2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="description">
<div id="description1">
<div class="">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
<div id="description2">
<div class="">
<h3><em>text</em></h3>
<p>text</p>
</div>
</div>
</section>
<div class="clearfix"></div>
<footer>
<div class="container">
<p id="copywrite">AllKind Corporation, Copyright © 2018</p>
Credits
<p id=disclaimer>By using this site, you agree to our Privacy Policy and Terms of Conditions.</p>
<p id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
</a>
<br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
</footer>
If you want like this then i will explain it.