Home/ Questions/Q 8275471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T08:05:15+00:00

I have a CSS like this: #sidebar { float: left; margin: 0; padding: 0;

  • 0

I have a CSS like this:

#sidebar {
   float: left;
   margin: 0;
   padding: 0;
   background: #044169;
}
#sidebar-menu {
   height: 100%;
   margin: 0;
   padding: 0;
   background: #CCCCCC;
}

(Call it test.css) and a simple HTML file like this:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="test.css">
</head>
<body>
  <h1>Test</h1>
  <div id="sidebar">
      <div id="sidebar-menu">
          <ul>
             <li>One</li>
          </ul>
      </div>
  </div>
</body>
</html>

I really do not understand why sidebar-menu is 35px high, and sidebar is 51px wide. Shouldn’t sidebar-menu be as high as sidebar…?!?

In my head, I think: well, margins are 0, paddings are 0, so the containing element, sidebar-menu, which has height:100% (of the container, I would think), ought to be as big as the container!

I am obviously getting something very wrong…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unless otherwise specified, the parent container div will size itself appropriately to its largest element that has an absolute size, not a relative size.

    The div sidebar-menu does not have an absolute size, but determines its size from its child, the unordered list with the text “One”. It is because of this that sidebar will in fact size itself to 35px high and 51px wide, then its child sidebar-menu will fill 100% of that height and the width of its child.

    • 0