I would like a layout like this but my <aside> is not joining with the footer

Asked

Viewed 76 times

2

inserir a descrição da imagem aqui 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Example1</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                
            }
            header {
                background-color: aqua;
                display: block;
                float: right;
                padding: 1em;
                width: 85%;
            }
            main {
                background-color: fuchsia;
                display: block;
                float: right;
                padding: 1em;
                width: 85%;
                height: 300px;
            }
            aside {
                background-color: firebrick;
                padding: 1em;
                width: 15%;
            }
            footer {
                background-color: chartreuse;
                clear: both;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <header>HEADER</header>
        <main>MAIN</main>
        <aside>ASIDE</aside>
        <footer>FOOTER</footer>
    </body>
</html>

html5 css3

2 answers

2


What you did in your code is not very cool. You set the menu size, it will always be height: 300px; on any screen size. If this is the intention, you can do the same for the aside.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
}

header {
  background-color: aqua;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
}

main {
  background-color: fuchsia;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
  height: 300px;
}

aside {
  background-color: firebrick;
  padding: 1em;
  width: 15%;
  height: 352px;
}

footer {
  background-color: chartreuse;
  clear: both;
  padding: 1em;
}
<title>Example1</title>


<body>
  <header>HEADER</header>
  <main>MAIN</main>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</body>

I recommend you do it this way:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.geral {
  min-height: 100%;
  position: relative;
  height: 100%;
}

.header {
  background-color: aqua;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: chartreuse;
  clear: both;
  padding: 1em;
}

.content {
  background-color: fuchsia;
  display: block;
  float: right;
  padding: 1em;
  width: 85%;
  height: 70%;
}

.aside {
  background-color: firebrick;
  padding: 1em;
  width: 15%;
  height: 100%;
}
<title>Example1</title>

<body>

  <div class="geral">
    <div class="header">
      HEADER
    </div>

    <div class="content">
      MAIN
    </div>
    <div class="aside">
      ASIDE
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>

</body>

That way, you don’t set a size for your main (I changed the name to content, because it is in this space that you put the content of your site).

  • 2

    Thank you very much guy XD

1

Try to put the position absolute and the height 100%.

aside {
    background-color: firebrick;
    padding: 1em;
    width: 15%;
    height: 100;
    position: absolute;
}

  • I’ve put it that way but it leaks in the footer :(

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.