0

css positioning problem

* {
  color: #fff;
  font-family: sans-serif;
  font-size: 32px;
  text-align: center;
}

header,
nav,
section,
article,
footer,
aside {
  padding: 2rem;
}

header {
  background-color: #FFC300;
}

nav {
  background-color: #FF5733;
}

section {
  background-color: #C70039;
}

article {
  background-color: #900C3F;
  width: 80%;
  margin: 10px auto;
}

aside {
  background-color: #cd6155;
}

footer {
  background-color: #581845;
}
<main>
  <header>
    cabecera
  </header>
  <nav>
    navegación
  </nav>
  <section>
    sección
    <article>artículo</article>
    <article>artículo</article>
  </section>
  <aside> más información</aside>
  <footer>
    Pie de página
  </footer>
</main>

I want it to be the following way and I can't, if someone helps me I would appreciate it very much

I want it to be the following way and I can't, if someone helps me I would appreciate it very much

isherwood
  • 58,414
  • 16
  • 114
  • 157
Alexander Sancheski
  • 1
  • You could give your aside the following: ```css aside { background-color: #cd6155; float: left; width: calc(50% - 4rem) } ``` or use a wrapper element around footer and aside and make it flex. ```css .mywrapper { display: flex; width: 100%; } .mywrapper > * { flex: 1; } ``` – denns Jan 27 '21 at 17:46

1 Answers1

-3

Instead of <section> and things like that try making a table with <table>, <tr>, <th>, and <td>.

I used W3Schools tutorial on HTML Tables. It should help you understand those tags.

Hex
  • 59
  • 1
  • 12