İç içe kayan div'ler, dış divın büyümemesine neden olur

Question

Herhangi biri, css soruları için stackoverflow'tan daha iyi bir yer önerebilirse lütfen bana bildirin.

Arka plan ve kenarlıklı bir dış div var ve ardından renkli kutu içinde iki sütuna ihtiyacım var. Yüzen divları dış divın içine yerleştirdiğim için bazı sebeplerden dolayı, dış div büyür. İşte

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

Benim CSS: Burada

benim HTML

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

Ekran Görüntüsü:

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

Answer 1

Şamandıralı blokları içeren şamandıralı bloklar otomatik olarak genişlemez, çünkü şamandıra blokları normal akışın dışına (veya en azından özel olarak akış dışında) alınır. Bunu düzeltmenin bir yolu, overflow özelliğini hidden veya auto olarak belirtmektir.

.tip-box { overflow: auto; } 

Daha fazla bilgi için bkz quirksmode.

Answer 2

Bu durumda ben div'ler sol yüzer olmaz Onları göstermek istiyorum: satır içi veya satır içi blok.

3 sütun, tarayıcı penceresi küçülürse 2 sütuna, ardından 1 sütuna dönüşecektir.

Answer 3

Genellikle bir clearfix olarak bilinen şeylere ihtiyacınız olacak. Ayrıca, form elemanları için etiketleri biçimlendirme yerine h6 arasında label unsurları kullanmak isteyebilirsiniz, bir kenara olarak http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box { 
    overflow: hidden; 
} 

ve bunun yerine bir listesini kullanın: - Bu durumda içeren elemana bir overflow: hidden yapacağım bkz Her label - input çiftini içermek için bireysel div s sayfalarına ve CSS dosyanız için daha karmaşık seçicilere dayanarak kullandığınız class özniteliğinin miktarını azaltın.

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

Answer 4

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

bu, ie7 + ve diğer tarayıcılarda yeni blok biçimlendirme bağlamı kurar

Answer 5

Ekleme aşağıdaki HTML <div class="tip_box"></div> sonra yüzen içerecek şekilde IE6 içinde haslayout tetikler: Burada

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

CSS :

.clear{ 
clear:both; 
} 

Kesinlikle işe yarayacak.