CODEWITHSUNDEEP
htmlcss
Elijah Andrushenko
Elijah Andrushenko

Reputation: 23

How to remove white space gap in this HTML Project

Okay so I'm using an example I saw on W3 Schools. Here is the exact problem and I was able to replicate my problem on their website as well. https://www.w3schools.com/howto/howto_css_portfolio_gallery.asp

My problem is that I have this large white space gap depending on the size of my grid blocks. When the grid blocks are all identical size then there is no large gap.

If the grid blocks that are on the right side are larger then there is no gap.

There is only a gap when the grid block on the left is larger than its right neighbor.

So my question is what do I do to get rid of this gap?

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}


/* Center website */

.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}


/* Add padding BETWEEN each column */

.row,
.row>.column {
  padding: 8px;
}


/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
}


/* Clear floats after rows */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Content */

.content {
  background-color: white;
  padding: 10px;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
<!-- MAIN (Center website) -->
<div class="main">

  <h1>MYLOGO.COM</h1>
  <hr>

  <h2>PORTFOLIO</h2>

  <!-- Portfolio Gallery Grid -->
  <div class="row">
    <div class="column">
      <div class="content">
        <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
        <h3>My Work</h3>
        <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no</p>
      </div>
    </div>
    <div class="column">
      <div class="content">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <h3>My Work</h3>
        <p>Less space used here</p>
      </div>
    </div>
    <div class="column">
      <div class="content">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <h3>My Work</h3>
        <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
      </div>
    </div>
    <div class="column">
      <div class="content">
        <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
        <h3>My Work</h3>
        <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
      </div>
    </div>
    <!-- END GRID -->
  </div>

  <div class="content">
    <img src="/w3images/p3.jpg" alt="Bear" style="width:100%">
    <h3>Some Other Work</h3>
    <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
    <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
  </div>

  <!-- END MAIN -->
</div>

Upvotes: 2

Views: 112

Answers (1)

Uzair Hayat
Uzair Hayat

Reputation: 540

It's my understanding that your design is currently breaking the document flow, using the css float: left option.

If you look closely, Your portfolio items are actually in the correct order based on your code, the order is 1. Mountains, 2. Lights, 3. Nature, 4. Mountains. the DOM has been rendered to fill the space after the "Lights" with "Nature". This is because the document is rendered Left to Right, Top to Bottom, with that in mind, "Nature" occupies the entire space causing a gap when "Mountains" is rendered.

Instead of using floats, I would recommend using CSS Grids instead.

Check the following code out:

#grid { 
    display:grid;
    grid-template-column: 1fr 1fr;
    column-gap: 30px;
}

.elem {
    margin-bottom: 25px;
}
<div id="grid">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
</div>

Upvotes: 1

Related Questions