So my page is here and as you can see in the middle i am trying (unsuccessfully) to get the two images to fit into the gray box...one on each side. here is my html
<div class="top_center_image">
<div class="left_image">
</div>
<div class="right_image">
</div>
</div>
and here is my 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;
}
is there an easier and better way to line all this up.....thanks in advance
Try this,
remove margin-left: 11px from both the .left_image and .right_image Add as follows
.left_image {margin: 10px;}
.right_image {margin: 10px;}