1

I want a margin of 5px in between my three columns of images, but every time I add the margin, the third column goes down below the first two. I've tried decreasing the width of the columns to 30%, but then they aren't perfectly in the middle. How can I solve this?

html: 

<div class="rows">
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
        <div class="column">
          <img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
        </div>
      </div>

css:

.rows {
  margin-top: 30px;
}

.column {
  float: left;
  width: 33.33%;
  margin: 5px;
}

.column img {
  width: 100%;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
westfloor22
  • 21
  • 3
  • wrapping item on divs is not always needed, you could've just added the class .column directly on the images. – T04435 May 05 '20 at 12:19
  • I'm going to add many more images to each column so I thought it would be easier to just add .column once to the div rather than to every pic. – westfloor22 May 05 '20 at 12:28

1 Answers1

3

try with calc() like 

.column {
  float: left;
  width: calc(33.33% - 10px);
  margin: 5px;
}
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40