I have 3 divs in a row with an image and some text. One div has shorter text than the other. When i resize the browser and the text only in one div gets in the new line (so one div has two lines of text and the others have only one line) the divs with fewer text lines get extra margin on top. But when i open the "inspect element" nothing is wrong in the numbers.
this is what I'm talking about
here's the html:
<div id="ribolovna_mjesta" class="content ne_naslovna">
<div class="drustvo_wrapper">
<div class="inner">
<img src="img/FOTF0A9.jpg" class="img-responsive">
<h4>SRD "Karas" Peklenica </h4>
</div>
</div>
<div class="drustvo_wrapper">
<div class="inner">
<img src="img/FOTF0A9.jpg" class="img-responsive">
<h4>SRD "Karas" Peklenica </h4>
</div>
</div>
<div class="drustvo_wrapper">
<div class="inner">
<img src="img/FOTF0A9.jpg" class="img-responsive">
<h4>SRD "Diver" Podbrest i Sveti Križ </h4>
</div>
</div>
<div class="drustvo_wrapper">
<div class="inner">
<img src="img/FOTF0A9.jpg" class="img-responsive">
<h4>SRD "Karas" Peklenica <br /> </h4>
</div>
</div>
<div class="drustvo_wrapper">
<div class="inner">
<img src="img/FOTF0A9.jpg" class="img-responsive">
<h4>SRD "Karas" Peklenica </h4>
</div>
</div>
<div class="drustvo_wrapper">
<div class="inner">
<img src="img/FOTF0A9.jpg" class="img-responsive">
<h4>SRD "Karas" Peklenica </h4>
</div>
</div>
</div>
sass
#ribolovna_mjesta
text-align: center
width: 100%
.drustvo_wrapper
display: inline-block
width:30%
min-width: 125px
min-height: 205px
margin: 5px
.inner
padding: 10px
tried to remove the space between the divs with comments and negative margins and word spacing...didn't help...it gave me the same result..
what should i try next?
Thanks in advance
