My goal is to showcase images within a unique div structure. Currently, the arrangement appears as follows:
It seems that the green divs are extending beyond their parent div (the black one).
This is how it's structured:
<div class="photoView center">
<div class="grid">
<div ng-repeat="i in [1,2,3]" class="groupPhoto">
<div ng-repeat="i in [1,2,3,4]" class="col-1-4 photoSimple" style="display:inline-block;"></div>
</div>
</div>
</div>
CSS :
.photoPrincipal {
width: 600px;
height: 300px;
background-color: blue;
}
.photoView {
width: 600px;
height: 300px;
background-color: rgba(0, 0, 0, 1);
margin-top: 50px;
}
.photoSimple {
width: 130px;
height:75px;
background-color: green;
margin:10px;
border: 2px dotted white;
display:block;
}
UPDATE
I forgot to mention that I am utilizing SimpleGrid, a CSS library that provides grid-based styling. Currently, it functions properly with this setup: http://jsfiddle.net/jmsqskyn/
In essence, I aim to have four green divs per line. However, this is not happening.
I attempted to use display:block but it had no effect.