CODEWITHSUNDEEP
htmlcssalignment
Dorukcan Kişin
Dorukcan Kişin

Reputation: 1131

Space between dynamic divs with same height

I want to create two divs with the same height and put a space between them. The float:left and float:right technique creates nonequal heighted divs. So, I searched on the internet and decided to use table-cell technique. But it does not allow me to use margin on cells and exposes some weird spaces which I can not control.

Here is the sample hierarchy of my code:

  <div class="container">
    <div class="left col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="right col">
        <div class="item"></div>
        <div class="item"></div>
    </div>
  </div>

And this is what i want:

desired result

Thanks.

Upvotes: 0

Views: 79

Answers (4)

SMS
SMS

Reputation: 84

Do you need like this

You can refer a link:https://jsfiddle.net/17d80ym3/16/

Html:
<div class="container">
  <div class="left col">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="right col">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Css
.container {
  display: flex;
  padding: 1em;
  background: red;
  justify-content: space-between;
}
. col {

  border: 1px solid grey;
}
.left col {
  background: green;
  border: 2px solid yellow;
}
.left {
  width: 60%;
  background: green;
}
.left .item {
  width: 80%;
}
.right {
  width: 35%;
  background: yellow;
}
.item {
  height: 50px;
  background: blue;
  margin: 1em;
}

Upvotes: 1

coder
coder

Reputation: 11

<style>
     .container{
         background:red;
         height:290px;
         width:625px;
     }
     .col{
         height: 225px;
         width: 280px;
         margin-top: 14px;
     }
     .left{
         float: left;
         background: #008000;
         margin-left: 13px;
     }
     .right{
         float: right;
         background: #FF0;
         margin-right: 40px;
     }
     .item{
         background: #00F;
         height: 50px;
         width: 200px;
         margin-top: 5px;
         margin-left: 5px;
     }
    </style>

    <div class="container">
        <div class="left col">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
            <div class="right col">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115109

Flexbox can do that

.container {
  display: flex;
  padding: 1em;
  background: red;
  justify-content: space-between;
}
.col {
  background: pink;
  border: 1px solid grey;
}
.left {
  width: 60%
}
.left .item {
  width: 80%;
}
.right {
  width: 35%;
}
.item {
  height: 50px;
  background: blue;
  margin: 1em;
}
<div class="container">
  <div class="left col">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="right col">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Upvotes: 3

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can use CSS border-spacing:

.container {
  border-spacing: 20px 0;
  display: table;
  width: 100%;
  height: 200px;
}
.col {
  display: table-cell;
  background: #000;
}
<div class="container">
    <div class="left col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="right col">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

Upvotes: 1

Related Questions