Html Css remove distance between two divs when lying in two rows and two cols

Question

I have 4 divs that lay two in row and two columns. They are different height and I want it to be taken into consideration when displaying on page. I always want the lower divs to stick vertically to upper ones like in the left side.

Now the code.

app.component.html

<div id="wrapper">
  <div id="content">
    <div id="first-row">
      <div class="col">
        <br>
        <a routerLink="/projects/endless-blow">Endelss Blow</a>
        <br>
        <a routerLink="/projects/endless-blow"><img src="assets/images/endlessblow_icon.png"></a>
        <br><br>
        <hr>
        <br>
        <div class="technology_images">
          <img src="https://freeiconshop.com/wp-content/uploads/edd/android-flat.png" width="75px" height="75px">
          <img src="https://cdn.iconscout.com/icon/free/png-256/java-23-225999.png">
          <img src="https://inforce.rs/wp-content/uploads/2018/07/spring-boot-logo-e1530901263416.png" width="188px" height="75px">
          <img src="assets/images/postgresql_icon.png" width="75px" height="75px">
        </div>
      </div>
      <div class="col">
        <br>
        <a routerLink="/projects/book-library">Book Library API</a>
        <br>
        <a routerLink="/projects/book-library"><img src="assets/images/win_console_icon.png"></a>
        <br><br>
        <hr>
        <br>
        <div class="technology_images">
          <img src="assets/images/java_icon.png">
          <img src="assets/images/jetty_icon.png" width="265px" height="75px">
        </div>
      </div>
    </div>
    <div id="second-row">
      <div class="col">
        <br>
        <a routerLink="/projects/endless-blow">Endelss Blow</a>
        <br>
        <a routerLink="/projects/endless-blow"><img src="assets/images/endlessblow_icon.png"></a>
        <br><br>
        <hr>
        <br>
        <div class="technology_images">
          <img src="assets/images/android_icon.png" width="75px" height="75px">
          <img src="assets/images/java_icon.png">
          <img src="assets/images/spring_boot_icon.png" width="188px" height="75px">
          <img src="assets/images/postgresql_icon.png" width="75px" height="75px">
        </div>
      </div>
      <div class="col">
        <br>
        <a routerLink="/projects/book-library">Book Library API</a>
        <br>
        <a routerLink="/projects/book-library"><img src="assets/images/win_console_icon.png"></a>
        <br><br>
        <hr>
        <br>
        <div class="technology_images">
          <img src="assets/images/java_icon.png">
          <img src="assets/images/jetty_icon.png" width="265px" height="75px">
        </div>
      </div>
    </div>
  </div>
</div>

app.component.css

html, body {
  margin: 0;
  padding: 0;
  align-items: center;
  text-align: center;
}

body {
  border: 3px solid green;
  max-width: 600px;
  margin: 0 auto;
  color: #fff;
}

#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: darkcyan;
}

#content {
  border: 3px solid red;
  box-sizing: border-box;
  position: absolute;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  overflow: auto;
  left: 0;
  right: 0;
  top: 70px;
  width: 100%;
}

#content a {
  font-size: 25px;
}

#first-row {
  margin-top: 20px;
}

.col {
  border-radius: 15px;
-moz-border-radius: 15px;
  display: inline-block;
  width: 350px;
  min-height: 350px;
  border: 3px solid green;
  background: rgba(150, 150, 50, 0.8);
  vertical-align: top;
      text-align:center;
      margin: 0 40px;
        /* margin-right: 100px; */
}

.col a img {
  padding:0;
  left:0;
  right:0;
  margin: 0 auto;
}

.technology_images {
  text-align: left;
}

div:not(.technology_images, .col) {
  min-height: 400px;
  box-sizing: border-box;
  width: 100%;
}

If you need code uploaded with result just take a look here

I did not see any topic that corresponds to my problem so please do not close this topic.

Thank you! :)

score 1 · Answer 1 · answered Jan 02 '21 at 20:33

This is really hard to achieve with HTML/CSS, and be flexible at the same time, nearly to impossible I would say, because in the real world, you might not know what height and width your elements really are and how many there are on each column.

The only HTML/CSS solution (if this fits your case) would be to create a single row, with multiple columns in it and display all the items by column. For this one, you really need to know beforehand exactly how many elements you would have on each column.

For a flexible solutions, I would really recommend using Masonry. This library would help you achieve the result you need really fast without having to do a complicated layout, which will also be complicated to maintain in the long run when multiple items might get added.

Html Css remove distance between two divs when lying in two rows and two cols

1 Answers1