«Печально известный» CSS: 2 divs бок о бок, перекрестная версия (?)

Question

Мой проблемный дизайн виден здесь (с использованием браузера, а не IE).И целевой дизайн наблюдается в браузере IE.Это базовый дизайн, состоящий из 4 элементов div: div родительского контейнера, div «left», div «right» (content: image и некоторый текст) и div «bottom» (естественно, предназначенный для того, чтобы следовать ниже верхнегодва деления).

Очевидная проблема заключается в том, что «правильный» div не позиционируется правильно!Предполагается, что он плывет справа от «левого» div.Разумеется, я разработал макет только с помощью CSS и разместил его, предполагая, что коду не требуется никаких кросс-браузерных настроек.

Итак, вопрос на миллион долларов ... «Чего не хватает в этом коде?»

<link rel="stylesheet" type="text/css"href="http://everprint.com/css/ebay3.css" media="screen" />
<div id="container">
  <div id="topbanner" class="title">[subject]</div>
  <div id="leftbar">[logo]<br />[business]</div>
  <div id="centralbar">
    <div style="text-align:center;">[main image]</div>
    <div id="ProductDetail" class="indented">[main text]</div>
  </div>
  <div class="style:clear;"></div>
  <div id="bottombar">[business speak]</div>
</div>

И соответствующий CSS: body {margin: 0;отступы: 0;выравнивание текста: по центру;}

#container {
  margin: 2px auto;
  text-align: left;
  width: 762px;
  height:700px;
  border: 2px dotted #777744;
}

#topbanner {
  margin: 2px;
  padding: 2px;
  border: 1px solid #777744;
  text-align:center;
}

#leftbar {
  float: left;
  width: 200px;
  height: 500px;
  margin-left: 2px !important;
  margin-left: 1px;
  padding: 2px;
  background: #f4f4f0;
  border: 1px solid #777744;
}

#centralbar {
  float: left;
  width: 547px;
  height: 565px;
  margin: 0 2px;
  padding: 2px;
  border: 1px solid #777744;
}

#rightbar {
  float: left;
  width: 200px;
  height: 565px;
  padding: 2px;
  background: #f4f4f0;
  border: 1px solid #777744;
}

#bottombar {
}

Answer 1

Все слишком широко.Все это упаковано в контейнер шириной 762 пикселя, в то время как только ваши #leftbar и #centralbar добавляют до 747 пикселей, не учитывая дополнительную ширину в отступах, полях и полях, увеличивая до 5 пикселей с каждой стороны.или всего 767 пикселей для всего пространства этих двух разделителей.Так как ваш браузер должен работать в ограничениях контейнера, если у div недостаточно места, чтобы сидеть справа, он опустится ниже до следующей доступной позиции. Подумайте об уменьшении ширины ваших div-ов и посмотрите, поможет ли это. Также обязательно используйте инструмент типа Firebug , чтобы экспериментировать с вашими контейнерами на лету в браузере.

Answer 2

# центральная панель должна быть смещена вправо, и, насколько я видел, вам нужно удалить отступ, чтобы поместить его в основной ящик.Это также неправильно:

<div class="style:clear;"></div>

Вы имели в виду:

<div style="clear: both;"></div>