CODEWITHSUNDEEP
htmlcss
DariusFontaine
DariusFontaine

Reputation: 794

Whitespace being generated when screen is resized

I have a HTML file that is structured in the following manner:

.container-fluid {
  height: 100%;
  width: 100%;
  background: white;
  margin: 0px;
}

.double-panel {
  width: 50%;
  height: 66%;
  background-color: #999;
  float: left;
  min-width: 300px;
  border: thick solid white;
}

.panel {
  width: 50%;
  height: 33%;
  background-color: #555;
  float: left;
  min-width: 300px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: thick solid white;
}

.bord {
  float: right;
  margin: 0;
  padding: 0;
  width: inherit;
  height: 100%;
}

.fields {
  background-color: #ccc;
}
<div class="container-fluid">
  <div id="main" class="double-panel">
    <div class="textbox col-6" id="wwd">
      <h4>WHAT WE DO</h4>
      <button>CURRENT VACANCIES</button>
      <ul>
        <li>Facebook</li>
        <li>LinkedIn</li>
        <li>Twitter</li>
      </ul>
    </div>
  </div>

  <div id="salesrecur" class="panel">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
      <h4></h4>
      <h2></h2>
    </div>
  </div>

  <div class="panel" id="soft">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
      <h4></h4>
      <h2></h2>
    </div>
  </div>
  <div id="salesrecur" class="panel">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
      <h4></h4>
      <h2></h2>
    </div>
  </div>
  <div class="panel" id="soft">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
    </div>
  </div>
</div>

When I resize the window to certain sizes, one of the boxes which has a width of 50%, is pushed down by whitespace and the structure is lost. It is very peculiar that it only occurs at certain, specific sizes.

My question is why does this resizing occur, and how to I prevent it from happening?

Upvotes: 0

Views: 31

Answers (1)

Adam Hughes
Adam Hughes

Reputation: 2277

The width of those boxes is actually more than 50%. Border is calculated on top of width by default in CSS so each div is more like 50% + 10px.

This is called the box model.

You can change the way the box model works by setting:

box-sizing: border-box;

This will include padding and borders in the width set

Note: I've noticed you do have it on .panel and after reading your issue again it's probably the min-width you've set on the panels

Upvotes: 1

Related Questions