Вложенные плавающие divs заставляют внешний div не расти

Если кто-то может предложить лучшее место, чем stackoverflow для вопросов css, пожалуйста, дайте мне знать.

У меня есть внешний div с фоном и границей, и тогда мне нужно иметь два столбца в цветном окне. По какой-то причине, когда я помещаю плавающие div внутри внешнего div, внешний div не растет.

Вот мой HTML:

<div class="tip_box">
    <h3>Send</h3>
    <hr />
    <form id="email_form">

        <div class="three-columns">
            <div class="contact_form_input">
                <h6>Your Name</h6>
                <input type="text" name="name_text_box" class="form_input" id="name_text_box" />
            </div>
            <div class="contact_form_input">
              <h6>Your Email</h6>
              <input type="text" name="email_text_box" class="form_input" id="email_text_box" />
            </div>
        </div>
        <div class="three-columns">
            <div class="contact_form_input">
                <h6>Recipient Name</h6>
                <input type="text" name="name_text_box" class="form_input" id="Text1" />
            </div>
            <div class="contact_form_input">
              <h6>Recipient Email</h6>
              <input type="text" name="email_text_box" class="form_input" id="Text2" />
            </div>
        </div>

    </form>
</div>

<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>

Вот мой CSS:

.three-columns {
    width: 290px;
    float: left;
    margin-right: 45px;
}
.tip_box {
    padding: 20px;
    margin: 20px 0px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 10px;
    border-radius: 7px;
    padding-left: 55px;
    background: #eee;
    font-style:italic;
    background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
    border: 1px solid #b7db58;
    color: #5d791b;
}

Скриншот:

http://dl.dropbox.com/u/2127038/cssissue.png

Ответы

Ответ 1

Неплавающие блоки, содержащие поплавковые блоки, не будут автоматически расширяться, так как поплавковые блоки выходят за пределы обычного потока (или, по крайней мере, специально вне потока). Один из способов исправить это - указать свойство overflow в hidden или auto.

.tip-box { overflow: auto; }

Подробнее см. quirksmode.

Ответ 2

Добавьте следующий HTML после <div class="tip_box"></div>:

<div class="clear"></div>

Вот CSS:

.clear{
clear:both;
}

Это, безусловно, будет работать.

Ответ 3

.tip_box { overflow:hidden; zoom:1; }

это устанавливает новый контекст форматирования блока в ie7 + и других браузерах, триггеры haslayout в ie6 содержат float

Ответ 4

Вам понадобится то, что обычно называется clearfix. В этом случае a overflow: hidden в содержащем элементе будет делать: http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box {
    overflow: hidden;
}

В качестве альтернативы вы можете также использовать элементы label вместо h6 для разметки ярлыков для своих элементов формы и использовать список вместо индивидуального div для размещения каждой пары label - input и уменьшить размер атрибута class, который вы используете, полагаясь на более сложные селектора для вашего файла CSS.

<li>
    <label for="recipient_email">Recipient Email</label>
    <input type="text" name="email_text_box" id="recipient_email" />
</li>

Ответ 5

В этом случае я бы не плавал divs влево, я бы заставил их отображать: встроенный или встроенный блок.

Ваши 3 столбца превратятся в 2 столбца, затем 1 столбец, если окно браузера сократится.