CODEWITHSUNDEEP
htmlcss
Siva Natalie
Siva Natalie

Reputation: 181

2 column with images and add padding

#wrap img{
    width:50%;
    display: inline-block;
}

<div id="wrap">
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
</div>

When I add padding to the images I have to set the width less than 50%, that will cause the padding not align. How to fix that problem?

demo : http://jsfiddle.net/7gon7kef/

Upvotes: 1

Views: 74

Answers (5)

Aaron
Aaron

Reputation: 10450

you will need to use border-box this should be used in all of your projects it'll help when you come to align elements using percentage widths.

border-box respects border, padding when it comes to sizing an element.

Generally I would apply this to an asterisk which would apply the style to every element on the page...

* {box-sizing: border-box}

If you're applying this to only your images then the snip below will help you. 

#wrap {
  background: grey;
}
#wrap img {
  width: 50%;
  display: inline-block;
  padding: 2em;
  box-sizing: border-box;
}
<div id="wrap">
  <img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" />
</div>

Upvotes: 2

om_jaipur
om_jaipur

Reputation: 2196

You can try css column-count:

#wrap { width:100%; -moz-column-count:2; -moz-column-gap:10px; -moz-column-width:50%; -webkit-column-count:2; -webkit-column-gap:10px; -webkit-column-width:50%; column-count:2; column-gap:10px; column-width:50%;}
#wrap img { width:100%; margin-bottom:5px;}
<div id="wrap">
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
</div>

enter image description here

Upvotes: 1

Kundan Sankhe
Kundan Sankhe

Reputation: 224

I think this will help you if you don't required older browser support. Basically in CSS3 "box-sizing" introduce for the same aim. It'll adjust the box with your specified width.

Also I have used font-size:0; to wrapper to remove exptra space between images as we have used display: inline-block

demo

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

You should use html like this -

#wrap{
   width: 250px;
    background:red;
    padding:8px 4px 1px
}

#wrap img{
    width:50%;
    display: inline-block;
    padding:0px 4px 4px;
    box-sizing:border-box
    
}
<div id="wrap">
<img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/><!--
--><img src="http://placehold.it/100x100"/>
</div>

Or you can try float:left like this-

.clearfix:after{
  content:'';
  display:block;
  clear:both;
  }
#wrap{
  width: 250px;
  background:red;
  padding:5px;
}

#wrap img{
  width:50%;
  /*display: inline-block;*/
  display:block;
  float:left;
  padding:5px;
  box-sizing:border-box;
  

}
<div id="wrap" class="clearfix">
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
<img src="http://placehold.it/100x100"/>
</div>

Upvotes: 0

Adam Robinson
Adam Robinson

Reputation: 81

If you are trying to align them in rows of 2 with padding try this.

http://jsfiddle.net/fo270Lzy/

Note i've used overflow:hidden; to clear the floats but you could also use the proper clearfix method instead.

display:inline-block adds additional space between elements. You also need box-sizing: border-box; to make your width include the padding.

Upvotes: 0

Related Questions