Css or html positioning problems

Question

for the webpage attached, I want to make the red background of the internal links curve at the bottom and fit into the normal section.
Then create an <aside> space on right with the <article>(with a coloured background too) in the middle. I am having issues with the percentages,alignments and floats css codes.

I want the whole page to have four compartments, the header which is already perfect as I like it. but the section is giving me problems, I want to divide it into three.

thanks in anticipation 🙋😃

Answer 1

Is this what you want?:

https://code.sololearn.com/WwZj3fdx8h0X/?ref=app

Answer 2

https://code.sololearn.com/W71x09p44ibz/?ref=app

Answer 3

Try this

https://code.sololearn.com/WLicihBldG1y/?ref=app

Answer 4

thanks a lot guys
you gave me a way to solve the problem

Answer 5

Your code is a bit messy. Try to remove the text and focus on the structure first so it would be more organized. Then put a black border on all parts so you can see what you are doing. Then use flexbox for an easier solution.
Other notes: Separate the nav from header.
The text content is quite long so it would be better if you divide them into articles and sections.

Answer 6

thanks
but I need to fit the article within the section's border

Answer 7

How about this?
Set border to position: relative;
Force internallinks expands to border height
position: absolute;
top: 0;
bottom: 0;

and push article to right using padding-left:21%
https://code.sololearn.com/WHR2fcRn9pfO/?ref=app