## When 25% is not 1/4 of the screen

Example 4.3 - Box Sizing - 25% is not 1/4 - Example 4.3
<div class="full"><p>Container - 100%</p><div class="quarter">One (25%)</div><div class="quarter">Two (25%)</div><div class="quarter">Three (25%)</div><div class="quarter">Four (25%)</div></div> div.quarter { width: 25%; border: 2px dashed purple; background-color: rgb(240, 200, 240); float: left; overflow: auto; text-align: center; padding-top: 1rem; padding-bottom: 1rem; } div.full { width: 100%; border: 2px solid black; overflow: auto; }

- Markup
- Style
- Display

     <div class="full">
       <p>Container - 100%
       </p>
       <div class="quarter">One (25%)
       </div>
       <div class="quarter">Two (25%)
       </div>
       <div class="quarter">Three (25%)
       </div>
       <div class="quarter">Four (25%)
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

      div.quarter {
        width: 25%;
        border: 2px dashed purple;
        background-color: rgb(240, 200, 240);
        float: left;
        overflow: auto;
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      div.full {
        width: 100%;
        border: 2px solid black;
        overflow: auto;
      }

Example 4.4 - Box Sizing - 25% is 1/4 - Example 4.4
<div class="full"><p>Container - 100%</p><div class="quarter">One (25%)</div><div class="quarter">Two (25%)</div><div class="quarter">Three (25%)</div><div class="quarter">Four (25%)</div></div> div.quarter { width: 25%; box-sizing: border-box; border: 2px dashed purple; background-color: rgb(240, 200, 240); float: left; overflow: auto; text-align: center; padding-top: 1rem; padding-bottom: 1rem; } div.full { width: 100%; border: 2px solid black; overflow: auto; }

- Markup
- Style
- Display

     <div class="full">
       <p>Container - 100%
       </p>
       <div class="quarter">One (25%)
       </div>
       <div class="quarter">Two (25%)
       </div>
       <div class="quarter">Three (25%)
       </div>
       <div class="quarter">Four (25%)
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

      div.quarter {
        width: 25%;
        box-sizing: border-box;
        border: 2px dashed purple;
        background-color: rgb(240, 200, 240);
        float: left;
        overflow: auto;
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      div.full {
        width: 100%;
        border: 2px solid black;
        overflow: auto;
      }