mercredi 17 août 2016

Basic HTML Positioning

New to HTML and trying to figure out why this is happening:

.oaHeader{
  background: black;
  width: 100%;
  height: 100px;
  padding-right: 50px;
  padding-left: 50px;
}

.logo{
  height: 100px;
  width: 200px;
  background: red;
  display: inline-block;
}

.oaAccount{
  background: blue;
  display: inline-block;
  width: 200px;
  height: 50px;
  float: right;
}
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
</head>

<body>
  <div class="page-container">
    <div class="oaHeader">
      <div class="logo"></div>
      <div class="oaAccount"></div>
    </div>
  </div>
  </body>
</body>
</html>

Why does the padding on the right get ignored? How can I adjust the Page-Container so this won't happen? I want the right box to be adjusted accordingly. I know it's a basic question, I know a possible solution, but I want to know why it happens.




Aucun commentaire:

Enregistrer un commentaire