CODEWITHSUNDEEP
htmlcssalignment
Matt Elhotiby
Matt Elhotiby

Reputation: 44086

How do I align this Css correctly

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

Upvotes: 2

Views: 519

Answers (3)

robx
robx

Reputation: 3123

I just added another div container inside of the top_center_image to wrap the two images, set both images to float left, rather than one left and one right. Then styled the new div with this

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

You will need to adjust with margin-left of the two images to push it in, but i'm sure you can figure that out as much.

Upvotes: 0

Jawad
Jawad

Reputation: 6672

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;}

Upvotes: 1

snowBlind
snowBlind

Reputation: 975

The following worked for me...

.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;

}

I added margin-top rules to both. I removed margin-left from the right image, and added margin-right in its place.

Upvotes: 2

Related Questions