Menu
I have a <div> which has some <img> in it. Every <img> is inside it's own <div>. The problem is that the outer div is not automatically taking the height of the content even though I set it's height to auto. Also to display the inner divs inline I set them to float: left. But if i remove the float the outer div behaves normally and takes the height of the content. But I need the imgs to be inline. Can anyone help me?
JSFiddle
HTML:
<div id="gallery"> <div class="gal-foto"> <img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img"> </div> <div class="gal-foto"> <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img"> </div> <div class="gal-foto"> <img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img"> </div> <div class="gal-foto"> <img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img"> </div> <div class="gal-foto"> <img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img"> </div> </div> CSS:
#gallery { border: 1px solid; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset; height: auto; margin-top: 20px; padding: 15px; } .gal-foto { float: left; margin: 3px; position: relative; } .gal-img { display: block; max-height: 150px; max-width: 150px; } 
251
The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents. As you are floating all elents in row it has 0 height and therfore so has .
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow. Usage: $(object). equalHeights([minHeight], [maxHeight]); Example 1: $(".
See the Demo here . Just add overflow: auto; to your main container.
#gallery { border: 1px solid; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset; height: auto; margin-top: 20px; padding: 15px; overflow: auto; } http://jsfiddle.net/WVL9a/
Add the following:
CSS:
.clearer { clear: both; } HTML:
<div id="gallery"> .... <div class="clearer"></div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
