Fix HTML5 floating issues
Question
When I use aside, section, and footer together, and I use "float:left" on the section the footer acts like it's "position:absolute" and bypasses both aside and section and goes to the top of the page even though I don't have any positions designated in CSS. Additionally, the section takes up the entire page, overlapping aside. It doesn't matter if I use HTML5, or revert everything back to divs and ids, the result is the same.
What am I doing wrong? Why is it doing that? and how do I fix it?
My CSS:
aside {
padding: 2%;
min-height: 863px;
width: 10%;
float: left;
}
section {
padding: 2%;
width: 80%;
float:left;
}
footer {
height: 80px;
padding: 2%;
background: lightblue;
}
My HTML:
<aside>
<p>This is the aside</p>
</aside>
<section>
This is the section
</section>
<footer>
This is the footer
</footer>
1 answers
solution1
1 ACCPTED 2019-12-15 04:35:53
float: ... was intended for wrapping text around an image and overused for layout purposes. You could slap a clear: both; on the footer and call it a day (also your padding is adding width in addition to your percentage widths - add * {box-sizing: border-box;} ).
For modern times, display: flex; is the way to go...
HTML
<body>
<main-section>
<aside>
<p>This is the aside</p>
</aside>
<section>
This is the section
</section>
</main-section>
<footer>
This is the footer
</footer>
</body>
CSS
body {
display: flex;
flex-flow: column;
}
aside {
min-height: 863px;
flex: 1;
}
main-section {
display: flex;
}
section {
flex: 8;
}
footer {
background: lightblue;
height: 80px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.