Box without a border wrapping around it

Question

Box without a border wrapping around it

I can't seem to figure out why the border I applied to a child div is not completely enclosing the element. I created two boxes using div tags and added a border to one of them.

    #box {
      height: 500px;
      width: 500px;
      background-color: orange;
    }
    
    #upper-half {
      height: 50%;
      width: 100%;
      padding: 0px;
      border: 5px solid black;
    }

       <html>
      <head>
        <meta charset="utf-8">
        <title>Height and width percentages</title>
        <link rel="stylesheet" href="practice.css"/>
      </head>
      <body>
        <div id="box">
          <div id="upper-half">
          </div>
        </div>
      </body>
    </html>

The border doesn't fully enclose the "upper half" box.

To investigate this issue, I used the browser's page inspector and found that the dimensions of the box are 509.2 x 259.2.

I have a few questions regarding this matter:

Why is the box size 509.2 x 259.2 even with zero padding?
Why isn't the border completely enclosing the box?
Why does the border touch the left side, top, and bottom of the box as expected, but not the right side?

html css

Answer 1

Answer №1

Consider adding box-sizing: border-box;

The default setting for box-sizing is content-box, which adds the width of borders to the content width. By changing it to border-box, it will include the total width with borders.

    #box {
      height: 500px;
      width: 500px;
      background-color: orange;
    }
    
    #upper-half {
      box-sizing: border-box;
      height: 50%;
      width: 100%;
      padding: 0px;
      border: 5px solid black;
    }

       <html>
      <head>
        <meta charset="utf-8">
        <title>Height and width percentages</title>
        <link rel="stylesheet" href="practice.css"/>
      </head>
      <body>
        <div id="box">
          <div id="upper-half">
          </div>
        </div>
      </body>
    </html>

To learn more, visit this helpful tutorial

Answer 2

Consider adding box-sizing: border-box;

The default setting for box-sizing is content-box, which adds the width of borders to the content width. By changing it to border-box, it will include the total width with borders.

    #box {
      height: 500px;
      width: 500px;
      background-color: orange;
    }
    
    #upper-half {
      box-sizing: border-box;
      height: 50%;
      width: 100%;
      padding: 0px;
      border: 5px solid black;
    }

       <html>
      <head>
        <meta charset="utf-8">
        <title>Height and width percentages</title>
        <link rel="stylesheet" href="practice.css"/>
      </head>
      <body>
        <div id="box">
          <div id="upper-half">
          </div>
        </div>
      </body>
    </html>

To learn more, visit this helpful tutorial

Answer 3

Answer №2

Remove the width:100% property from the inner box. Take a look at the example provided below.

#box {
  height: 500px;
  width: 500px;
  background-color: orange;
}
    
#upper-half {
  height: 50%;
  

  border: 5px solid black;
}

<div id="box">
  <div id="upper-half">
  </div>
</div>

Answer 4

Remove the width:100% property from the inner box. Take a look at the example provided below.

#box {
  height: 500px;
  width: 500px;
  background-color: orange;
}
    
#upper-half {
  height: 50%;
  

  border: 5px solid black;
}

<div id="box">
  <div id="upper-half">
  </div>
</div>

Answer 5

Answer №3

Your inquiries may be a bit perplexing as you have solely defined one element: #box. However, I will make an attempt to address them:

Based on your CSS specifications, your #box has dimensions of 500px x 500px.
The reason why the #upper-half does not fully enclose #box is because it has been set to 50% x 100% of the containing div, which is #box, resulting in dimensions of 250px x 500px.
It's crucial to note that the height and width of the border are not factored into the total calculations, hence why it extends beyond the anticipated 50% x 100%. The border aligns with the top and left sides of #box by default since objects in the DOM are typically aligned in this manner. The lack of alignment with the bottom or right edges is due to the absence of specific instructions indicating such alignment.

To address this issue, as suggested by @Damian Peralta, applying box-sizing: border-box; to #upper-half can effectively confine it within #box.

Answer 6

Your inquiries may be a bit perplexing as you have solely defined one element: #box. However, I will make an attempt to address them:

Based on your CSS specifications, your #box has dimensions of 500px x 500px.
The reason why the #upper-half does not fully enclose #box is because it has been set to 50% x 100% of the containing div, which is #box, resulting in dimensions of 250px x 500px.
It's crucial to note that the height and width of the border are not factored into the total calculations, hence why it extends beyond the anticipated 50% x 100%. The border aligns with the top and left sides of #box by default since objects in the DOM are typically aligned in this manner. The lack of alignment with the bottom or right edges is due to the absence of specific instructions indicating such alignment.

To address this issue, as suggested by @Damian Peralta, applying box-sizing: border-box; to #upper-half can effectively confine it within #box.

Box without a border wrapping around it

Answer №1

Answer №2

Answer №3

Similar questions

Space between elements in a horizontal arrangement

Automatically filling out a Pug form using an Express/Node.js web application

Align boxes in the center within a DIV container

Adjusting HTML/CSS for various screen sizes and devices

Issues with HTML keycodes not functioning properly in Firefox

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Using my function to iterate through all 'li class' elements on an eBay Scraper page

Removing the gaps within table cell contents

Unable to display scrollbar when generating dynamic content with jquery ajax

Unable to retrieve input values from the text fields using JavaScript

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

I'm still unclear on the necessity of using clear:both

Preventing Context Menu from Appearing on Long Click in HTML5 Games

How to Set a Button as Inline Text in a React Native Component

relocate HTML components

Tips for effectively sizing a logo within a Bootstrap navbar

Issue with SVG on tainted canvas causes IE security error when using toDataURL

Accordion button refuses to compress

Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?