Gönderen Konu: Yazilariniz tablo yapiniza siğmiyormu?  (Okunma sayısı 686 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Yazilariniz tablo yapiniza siğmiyormu?
« : 16 Ağu 2013, 09:50:03 »
Yaptiğimiz bir cok tasarimda bu sorunla karşilaşiriz

örneğin

Kod: [Seç]
<div id="wrapper">
   <div id="content">
      <div id="leftColumn">
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
      </div>
      <div id="rightColumn">
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
      </div>
   </div>
</div>

css yapisi

Kod: [Seç]
#wrapper {
width:500px;
margin:0 auto;
}
 
#content {
background:#f8f8ff;
border:1px solid #000;
min-height:200px;
height:auto !important;
height:200px;
}
 
#leftColumn {
float:left;
width:245px;
}
 
#rightColumn {
float:right;
width:245px;
}
 
#leftColumn p, #rightColumn p {
margin:0;
padding:0 10px;
}

Olmasi Gereken (Doğru olan)

Kod: [Seç]
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
 
.clearfix {display:inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

burdaki mantik .clearfix usantisiyla HTML-Code le DIV #content tabini buluşturmak

yani
Kod: [Seç]
<div id="wrapper">
   <div id="content" [b]class="clearfix"[/b]>
      <div id="leftColumn">
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
      </div>
      <div id="rightColumn">
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
      </div>
   </div>
</div>
umarim yararli olur.