I'm attempting to incorporate a sidebar on the right side of my homepage, positioned after the main section. Essentially, the main section will be on the left side while the sidebar will be on the right, running parallel to the main section. The difference is that the sidebar will not start from the top of the page. The first two children of the element, out of a total of five children, should occupy the entire width, while the remaining three children should have a width of 80%. The sidebar should fit within the remaining 20% of the width.
To provide a clearer explanation, I have included an image for reference.
Please note that the and elements are siblings. This is only for wider screens i.e. 1021px onwards. and will stack one after another in mobile view.
Below is my HTML code:
<html>
<body>
<header></header>
<div class="body-container">
<main>
<section class="child-1">Child-1</section >
<section class="child-2">Child-2</section >
<section class="child-3">Child-3</section >
<section class="child-4">Child-4</section >
<section class="child-5">Child-5</section >
</main>
<aside class="sidebar"></aside>
</div>
<footer></footer>
</body>
</html>
Below is the css code I tried for desired outcome:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
}
.body-container {
width: 80%;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.child-1,
.child-2 {
flex: 1;
width: 100%;
}
.child-3,
.child-4,
.child-5 {
flex: 1;
width: 80%;
}
aside {
flex: 1;
width: 20%;
}
It's not working. takes the width of its widest element i.e. child-1 & child-2. So, the child elements with 80% width are contained within main leaving a black space in rest of the 20%. Sidebar goes outside as its sibling element. Is there any way to achieve this. I don't want to use grid. I'd prefer flexbox or float. I'd like to avoid position:absolute/relative unless they're absolutely needed.
There are similar questions to this. But in all of them, they're talking about sibling elements. It's easy for an element to occupy space of other sibling element if its dimensions are uniform. In my question, I'm trying to occupy space of CHILDREN of the sibling element which are varying in their sizes.
How can I do this? Is it even possible? Thanks in advance.
