Как правильно выровнять этот Css

Question

Итак, моя страница здесь , и как вы можете видеть в середине, я пытаюсь (безуспешно) поместить два изображения в серый ящик ... по одному на каждой стороне. вот мой HTML

  <div class="top_center_image">
     <div class="left_image">
     </div>
     <div class="right_image">
    </div>
  </div>

и вот мой CSS

.top_center_image{
    background: url("../image/TopBox.png") no-repeat;
  height: 179px;
  margin-left: 5px;
  width: 649px;
}
.left_image{
    background: url('../image/DwightWorldVideoleft.png') top left no-repeat;
    width: 296px;
  height:152px;
    margin-left:11px;
    float:left;
}

.right_image{
  background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
   height: 152px;
   margin-left: 11px;
   width: 311px;
    float:right;
}

есть ли более простой и лучший способ все это выстроить ..... заранее спасибо

Answer 1

Следующее сработало для меня ...

.right_image {
background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
float: right;
height: 152px;
margin-right: 12px;
margin-top: 12px;
width: 311px;

}

.left_image {
background: url("../image/DwightWorldVideoleft.png") no-repeat scroll left top transparent;
float: left;
height: 152px;
margin-left: 11px;
margin-top: 12px;
width: 296px;

}

Я добавил правила top-margin для обоих.Я удалил margin-left с правого изображения и добавил margin-right вместо него.

Answer 2

Попробуйте это,

удалить поле left-left: 11px как из .left_image, так и .right_image Добавить следующим образом

.left_image {margin: 10px;}
.right_image {margin: 10px;}

Answer 3

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

width:630px; height:155px;margin-left:10px; padding-top:14px;

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