CODEWITHSUNDEEP
htmlcssborder
Chris Altig
Chris Altig

Reputation: 680

100% Height Element Border Overlapping

I'm completely new to HTML/CSS, so I apologize if this is a rookie question. The following code has an inner element's border overlapping with the outer element's border if the height for both is set to 100%. The overlap occurs at the bottom.

html,
body {
  height: 100%;
}

body {
  border: 5px solid red;
}

p {
  text-align: center;
}

.body-content {
  border: 5px solid black;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
}

.left-navbar {
  float: left;
  width: 5%;
  height: 100%;
  border: 5px solid pink;
  margin-bottom: -5px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <nav class="left-navbar">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
  </nav>
  <div class="body-content">
    <article>
      <p>Content</p>
    </article>
  </div>
</body>

</html>

I attempted a negative margin / negative padding, but neither of those options had any effect. Is there some other way to manipulate the height of the element to take the 5px border into account? Finally, why is the negative margin/padding not having any effect?

Thanks in advance.

Upvotes: 1

Views: 201

Answers (1)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

You need to make your left-nav a border box.

You can accomplish this by adding box-sizing: border-box;

It lets the browser include the vorders as part of the width and height;

html,
body {
  height: 100%;
}

body {
  border: 5px solid red;
}

p {
  text-align: center;
}

.body-content {
  border: 5px solid black;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
}

.left-navbar {
  float: left;
  width: 5%;
  height: 100%;
  border: 5px solid pink;
  box-sizing: border-box;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <nav class="left-navbar">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
  </nav>
  <div class="body-content">
    <article>
      <p>Content</p>
    </article>
  </div>
</body>

</html>

Upvotes: 2

Related Questions