使用html和css在导航栏下面放置侧边栏和文章

Question

with this html code:

    <header>
        <ul>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
        </ul>
    </header>

    <main>
        <nav>
            <ul>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
                <li> <a href="#">...</a> </li>
            </ul>
        </nav>

        <article>
            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>

            <section>
                <ul>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                    <li> <a href="#">...</a> </li>
                </ul>
            </section>
        </article>
    </main>

    <footer>
        <ul>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </li>
            <li> <a href="#">...</a> </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