CODEWITHSUNDEEP
htmlcss
Gabriel Rojas
Gabriel Rojas

Reputation: 5

I want to put two columns side by side using floats, but one column is not placed properly...why?

My aside element is positioned at the bottom...it should be on top, at the same level as my section...what I'm doing wrong??? I want these two columns to be at the same level, so I used floats in both, section and aside, but obviusly is not working...please help!

And also I can't

My HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout with Floats</title>
<link rel="stylesheet" type="text/css" href="estilos.css">


<body>

  <header>
    <h1>Leonardo da Vinci</h1>
    <nav>
      <ul>
        <li><a>Inicio</a></li>
        <li><a>Bio</a></li>
        <li><a>Obras</a></li>
        <li><a>Legado</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <div class="columnas">

    </div>
    <div class="columnas">

    </div>
    <div class="columnas">

    </div>
    <div class="columnas">

    </div>
  </section>

  <aside>
    <div>

    </div>
  </aside>

</body>
</html>

My CSS code:

header {
  background: black;
  color: white;
  overflow: hidden;
}

header h1 {
  text-align: center;
  width: 50%;
  margin: 0 auto;
  padding: 55px 0 0 0;
  text-transform: uppercase
}

header ul {
  padding: 0;
  list-style: none;
  overflow: hidden;
  text-align: center;
}

header ul li {
  width: 50%;
  margin: 0 auto;
  display: inline;
  text-transform: uppercase;
  padding: 5px;
}

section {
  width: 45%;
  overflow: hidden
  float: left;
}

section .columnas {
  background: red;
  width: 280px;
  height: 200px;
  margin: 15px 15px 0 0;
  float: left;
}

aside {
  width: 30%;
  float: right;
}

aside div {
  background: blue;
  width: 200px;
  height: 200px;

Upvotes: 0

Views: 349

Answers (1)

abidishajia
abidishajia

Reputation: 252

If I understand it properly, and if this is the solution you want, you were just missing a semi-colon after hidden.

section {
  width: 45%;
  overflow: hidden
  float: left;
 }

You can add margin-top: 15px to aside to get it at the exact level.

aside {
 width: 30%;
 float: right;
 margin-top: 15px;
 }

Upvotes: 2

Related Questions