Home/ Questions/Q 6974087
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:11:30+00:00

I have a problem which I do not understand. If I use percentage in

  • 0

I have a problem which I do not understand.
If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
But in fact those values are added to their size which I asume is wrong.
Is my expectation wrong?
The bellow example shows the issue. The both “divs” “left” and “right” I expect to be in a single line. If I remove “border” it works as expected.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
}

.right {
  border: 1px solid black;
  width: 80%;
  float: left;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s totally normal. It’s not what you might expect at first, but CSS works that way.

    Even without percentages:

    #width {
    width: 100px;
    padding: 0 20px;
}

    This #width div will occupy 140px. Works the same for percentages.

    So you might need inner divs to achieve what you want.

    <div class="left">
   <div class="inner">

   </div>
</div>
<div class="right">
   <div class="inner">
   </div>
</div>


.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
    • 0