Div не имеет высоты, даже если он имеет контент

У меня есть <div>, в котором есть <img>. Каждый <img> находится внутри него <div>. Проблема в том, что внешний div не автоматически принимает высоту содержимого, даже если я устанавливаю его высоту в auto. Также, чтобы отобразить внутренний divs inline, я установил их в float: left. Но если я удаляю float, внешний div ведет себя нормально и занимает высоту содержимого. Но мне нужно, чтобы imgs были встроенными. Кто-нибудь может мне помочь?

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;
}

Ответ 1

Смотрите демо здесь. Просто добавьте overflow: auto; в свой основной контейнер.

#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;
}

Ответ 2

http://jsfiddle.net/WVL9a/

Добавьте следующее:

CSS

.clearer { clear: both; }

HTML:

<div id="gallery">
    ....
    <div class="clearer"></div>
</div>

Ответ 3

Добавить класс clearfix в основной контейнер:

.clearfix:before,
.clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Позвоните в свой основной контейнер:

<div class="clearfix" id="gallery">
...
</div>

Ответ 4

Подобно этому просто напишите #gallery в overflow:hidden;

демонстрация

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;
    overflow:hidden;
}

Ответ 5

Добавьте это в свой файл css:

.clear{
clear:both;
}

Теперь, перед закрытием каждого div, добавьте это утверждение: <div class="clear"></div>

Ответ 6

Просто добавьте overflow: auto;, как показано ниже:

 #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;
    }

Ответ 7

один метод: установите .gal-foto в display: inline-block

или вы можете clearfix #gallery, добавьте эти

#gallery:after{
   content: " ";
   display: table;
   clear: both;
}