align divs using css and HTML

advertisements

I am trying to line up 4 divs inline using CSS and also make them responsive.

I tried this css

.col {
  border:1px solid black;
  width:20%;
  display:inline-block;
  padding:5px;
  margin:5px 5px 5px 5px;
  text-align:left;
}

@media only screen and (max-width: 800px) {
  .col {
    width:40%;
  }
}

@media only screen and (max-width: 500px) {
  .col {
    width:100%;
  }
}

But as the screen gets smaller, they are slightly different sizes

I created a fiddle of my code: https://jsfiddle.net/j2de3tt8/

I am trying to make it like: http://www.elegantthemes.com/preview/Divi/shop-no-sidebar/


I have made a modification to Abhitalks' fiddle. I've removed the padding:0; and margin:0; from everything, as I don't see this as necessary. If you're setting your container div to 100% width, all your other dimension and margin units need to be %'s as well.

the key is to subtract 2% from the width of your .col's to allow for the margin that will 'touch' the padding of your container div.

.col {
   border: 1px solid black;
   width: 23%; display: inline-block;
   padding: 2%; margin: 1%;
   text-align: left;
   font-size: 16px;
}

https://jsfiddle.net/Zemo/482smdfq/

You may need a media query when the .col's get very small on a narrow screen.