Question

HTML code:

<div class="goleft"> AD 300x250 size </div>


        <div class="itemImageBlock goleft">
              <span class="itemImage">
              <img src="/media/k2/items/cache/c3997142576e6f4d163ead570965368d_S.jpg" alt="Pranab Mukherjee" style="width:300px; height:250px;" />
          </span>

        </div>

CSS:

.itemImageBlock { margin:0 0 16px; padding:0; text-align: center; clear: both; }
span.itemImage { display:block; text-align:center; margin:0 0 8px 0; }
.goleft{
    float:left
}

these 2 blocks are coming one after other. i want these to align side by side.

Please help me in achieving this.

If i change the order of the div blocks(first image next ad) its working. but i want first ad and next image.

image URL: http://tinypic.com/r/2ih5hco/6

Thanks in Advance.

Answer 1

Just add an extra class to your css code to make it clutter free…

CSS

.goleft{
    float:left
}

and add this class to your DOM –

       <div class="itemImageBlock goleft">
              <span class="itemImage">

              </span>
         </div>
         <!-- Advertisement(300x250) -->
          <div class = "goleft">
          </div>