div content margin konteyner iterek

Question

Gerçekten beni şaşırtan bir konuya koşuyorum.

Arka planını tarayıcı ekranının sağ üst köşesinde uygulamak istediğim bir kapsayıcım var. İçinde div 4em bir üst marjı vardır ve bu konteyner div iter.

CSS:

#container { 
background: transparent url("../images/house-bg.png") top right no-repeat scroll; 
} 

#wrapper { 
    background: #FFF; 
    width: 960px; 
    height: 600px; 
    margin: 4em auto 0; 
    border: 10px solid #C3CF21; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    border-radius: 20px; 
    -moz-box-shadow: 0 0 25px #444; 
    -webkit-box-shadow: 0 0 25px #444; 
    box-shadow: 0 0 25px #444; 
} 

HTML:

<div id="container"> 
     <div id="wrapper"> 
      <div id="header"> 

      </div> 
      <div id="main"> 

      </div> 
     </div> 
     <div id="footer"> 
      &copy; Copyright <?php echo date("Y");?> Company, Inc. 
     </div> 
    </div> 

Ben sargının marjı yerine dışına konteyner div içinde olmak istiyorum.

Birden fazla görüntü özelliğini ve konum özelliklerini hiçbir boşuna denemedim. Düzelten tek şey, #wrapper'ın başlangıcından önce bir " " eklenmesidir, ancak bunun için bir CSS düzeltmesi olması gerekir.

Answer 1

#container div içindeki içeriği "kapatmak için" overflow:hidden ekleyebilirsiniz.

Burada, http://jsfiddle.net/kQsPR/overflow:hidden kaldırmaya çalışın ve anlattığınız gibi davranacaktır.

Bu davranış, burada belirtilir: bir blok biçimleme bağlamında http://www.w3.org/TR/CSS2/visuren.html#block-formatting

, her çerçevenin sol dış kenar ihtiva eden bloğun sol kenarı (temas sağdan sola biçimlendirme, sağ kenarlar teması). Bu kutu, kutunun kendisi nedeniyle dar olabilir ki durumda bir yeni blok biçimleme içerik (kuramadığı takdirde, (bir çerçevenin satır çerçeveleri yüzen küçülebilir) da yüzen varlığında geçerlidir yüzer).

Ve bu tam olarak ne "taşma" "gizli" dışında (yeni biçimlendirme bağlamı kuran) yetisine sahip olduğunu, ayrıca yapabileceği örneğin, #container elemana sınır-top ekleyerek.