As a newcomer to web development, I recently attempted to use flexbox for the second time while working on the layout for my website. However, I encountered an issue with trying to float aside next to content. Despite my efforts, it seems to just disappear. (Please note that the colors are used for distinguishing different elements).
Feel free to take a look at my layout idea:
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
max-width: 135em;
height: 7em;
background: rgb(68, 100, 155);
}
section {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: chocolate;
max-width: 100em;
height: 50em;
}
aside {
display: block;
background: chartreuse;
float: right;
max-width: 20em;
height: 50em;
}
footer {
display: flex;
justify-content: center;
align-items: center;
background: crimson;
max-width: 135em;
height: 22em;
}<header></header>
<section></section>
<aside></aside>
<footer></footer>