Positioning sidebar and article below navbar with html and css - html

Question

with this html code:
<header>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</header>
<main>
<nav>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</nav>
<article>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
<section>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</section>
</article>
</main>
<footer>
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</footer>
I am trying write a css for acomplish this things:
one fixed navbar on top (already ok)
main area with a sidebar and an "article" area (need fix position and alignment of its parts)
the article area needs to be placed to the roght of the sidebar, but right now it's been displayed on the bottom of it.
footer has some strange banner been displayed below (only when mouse cursor is not hovering it) like it's showing here:
https://jsfiddle.net/klebermo/5axmocwp/1/
Anyone can give some hints of how to fix that?

Answer 1

May be this is what you want? I only change this in css:
main {
margin-top: 32px;
/* below lines was added */
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
/* below line was added */
height: 50px;
}
Here is example. I use flexbox in this solution - great tutorial about this is HERE - however you can also use even better tool for layouts: GRID.
Suggestion: use class attribute in html and then use that class name in css - direct html tag names in css is not good practice - if possible avoid it