Верстка слоями. Ошибка.

[TavlaD]

Помогите, пожалуйста, разобраться где ошибка и как исправить. При верстке появляется отступ показанный на скриншоте стрелкой... не могу понять как его убрать...

Скриншот:

HTML:

<div class="main">
    <div class="col_left"> 
      <div class="blocknews"> 
        <div class="top"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b></div>
        <div class="cont"> 
          <h1>24 сентября 2009</h1>
          <span>Добавлено <a href="#">ссылка</a>. <br />
          Здесь будет обзор последних новостей, но пока тут пусто</span> 
          <h1>24 сентября 2009</h1>
          <span>Добавлено <a href="#">ссылка</a>. <br />
          Здесь будет обзор последних новостей, но пока тут пусто</span> 
          <h1>24 сентября 2009</h1>
          <span>Добавлено <a href="#">ссылка</a>. <br />
          Здесь будет обзор последних новостей, но пока тут пусто</span> 
          </div>
        <div class="bottom"><b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div>
      </div>
    </div>    
    <div class="col_right"> 
      <div class="change"> 
        <!-- изменяемая часть -->
        <div class="lot"> 
          <div class="lot-image"><img src="images/oborud001.jpg" /></div>
          <div class="lot-description">text</div>
          <div class="clear"></div>
        </div>
        <div class="lot"> 
          <div class="lot-image"><img src="images/oborud001.jpg" /></div>
          <div class="lot-description">text</div>
          <div class="clear"></div>
        </div>
        <div class="lot"> 
          <div class="lot-image"><img src="images/oborud001.jpg" /></div>
          <div class="lot-description">text</div>
          <div class="clear"></div>
        </div>
        <!-- конец изменяемой часть -->
      </div>
    </div>
<div class="clear"></div>
</div>

CSS:

.main {width: 920px; margin: 34px auto; background: #12101E; border: 1px solid #4B3F55;}
.clear {clear: both;}

.col_left {width: 260px; margin: 0 auto; float: left;}
.col_right {margin-left: 261px; padding: 0 20px 10px 0;}

.blocknews {margin: 0 18px; padding-top: 120px; overflow: hidden;}
.xtop, .xbottom { display: block; background: transparent; font-size: 1px; }
.xb1, .xb2, .xb3, .xb4 { display: block; overflow: hidden; }
.xb1, .xb2, .xb3 { height: 1px; }
.xb2, .xb3, .xb4, .cont { background: #222230; border-left: 1px solid #4B3F55; border-right: 1px solid #4B3F55;}
.xb1 { margin:0 5px; background: #4B3F55;}
.xb2 { margin:0 3px; border-width: 0 2px; }
.xb3 { margin:0 2px; }
.xb4 { height: 2px; margin: 0 1px; }
.cont { padding: 8px 15px; }
.cont h1 {font: bold 11px Arial; color: #FF4B27; margin: 20px 0 5px 0;}
.cont, .cont span {font: 11px Arial; color: #fff;}
.cont span a, .change a {color: #1F73AC;}
.cont span a:hover, .change a:hover {color: #76B9F7;}
.change {padding: 20px 0;}
.change, .change p, .change ol, .change ul, .change li, .change span, .change table, .change tr, .change td {font: 13px/20px Tahoma, Arial; color: #D0C1DB;}

.lot {border: 1px solid #675678; padding: 4px; margin-bottom: 10px;}
.lot-image {float: left; width: 250px;}
.lot-image img {width: 244px; height: 183px; border: 3px solid #483757;}
.lot-description {margin-left: 251px;}

[mini]

мда, прикольная у вас верстка, В общем что получается, у вас левой бокс тянет за собой правый , уберите левый бокс и отступ пропадет

[TavlaD]

  mini said:

мда, прикольная у вас верстка, В общем что получается, у вас левой бокс тянет за собой правый , уберите левый бокс и отступ пропадет

Я то вижу, что левый тянет правый, но как это исправить? Ведь согласись, что левый создавался не для того, чтобы там все удалять.

[mini]

  TavlaD said:

Я то вижу, что левый тянет правый, но как это исправить? Ведь согласись, что левый создавался не для того, чтобы там все удалять.

левому { float:left; width:} и правому { float:left; width:} ширину ту какую нужно, он же не резиновый и не надо извращатся так как ты, с кучей маргинов

[TavlaD]

  mini said:

левому { float:left; width:} и правому { float:left; width:} ширину ту какую нужно, он же не резиновый и не надо извращатся так как ты, с кучей маргинов

ну не куча маргинов, а всего лишь один там =) Указал обоим боксам ширину и float все норм стало.

Но а вообще в чем прикол и связь маргина и того отступа?

Edited October 5, 2009 by TavlaD

[mini]

  TavlaD said:

ну не куча маргинов, а всего лишь один там =) Указал обоим боксам ширину и float все норм стало.

Но а вообще в чем прикол и связь маргина и того отступа?

честно з/х чего он так