Website image spacing correctly - html

Question

I want my images next to each other with a little margin in between. But when I do `margin-right: 10px; on each div the last image wont align with my title bar.
How can I give the divs a space in between without having a space on the right of the last div?
Note: The content is dynamic, so I cant make a div to hold the 4 divs.

Answer 1

There are many ways you can do, I'll just show one of them.
EDIT 1: solution for multiple rows by using nth-child
DEMO: http://jsfiddle.net/s0xLfcrx/1/
HTML:
<div class="bar"></div>
<div class="box">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
</div>
CSS:
.bar, .box {
width: 460px;
}
.bar {
background: lime;
height: 20px;
}
.box {
text-align: center;
font-size: 0;
}
.box > div {
display: inline-block;
font-size: 16px;
background: gold;
width: 100px;
margin: 0 10px;
}
.box > div:nth-child(4n+1) {
margin-left: 0;
}
.box > div:nth-child(4n) {
margin-right: 0;
}
ORIGINAL DEMO (for only 1 row):
http://jsfiddle.net/s0xLfcrx/

Answer 2

You could use justify-content: space-between. This creates even spacing inbetween each of the image containers and pushes the first and last element to the edges of the parent div.
Your html:
.container {
width: 346px;
}
.title-bar {
background-color: #ccc;
width: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.space-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.image-container {
background: #ccc;
padding: 5px;
width: 60px;
height: 50px;
margin: 0;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="container">
<div class="title-bar">
<h1>Title</h1>
</div>
<div class="flex-container space-between">
<div class="image-container">1</div>
<div class="image-container">2</div>
<div class="image-container">3</div>
<div class="image-container">4</div>
</div>
</div>
The styling for the image-containers in the code above is just an example - if you have an unknown number of divs loading you either fix the width, or make them fluid and the container width will need to be fluid (unless you want it fixed of course).

Answer 3

you could do something like this with variable widths:
.titlebar {
width: calc(100% - 2px);
display: block;
height: 40px;
background: blue;
}
.item25 {
width: calc(25% - 11px);
height: 80px;
display: inline-block;
background: black;
margin-right: 10px;
}
.no-margin {
margin-right: 0;
}
<div class="titlebar"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25"></div>
<div class="item25 no-margin"></div>

Answer 4

Just use simple CSS
.div { width: 25%; text-align: center; padding: 5px; box-sizing: border-box; }
.div img { display: block; margin: 0 auto; }

Answer 5

There are many ways to do but if you need RESPONSIVE for this then use this solution:
body{font-family:arial;}
h1{
display:block;
margin:0px;
padding:0px;
background:#0af;
color:#fff;
text-align:center;
}
.layer{
display:block;
overflow:auto;
}
.layer > div{
display:block;
float:left;
margin:10px 10px 10px 0px;
width: -moz-calc(25% - 7.5px);
width: -webkit-calc(25% - 7.5px);
width: calc(25% - 7.5px);
background-color:#000;
height:30px;
}
.layer > div:nth-child(4n) {
margin-right: 0;
background-color:#f00;
}
<h1>Title bar</h1>
<div class="layer">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div>
</div>