How to align image and advertisement side by side using CSS and HTML


Tags: html,css

Problem :

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.



Solution :

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>

    CSS Howto..

    How to stop text from overlapping CSS?

    How to strike through obliquely with css showing the text on top of the strike through

    Test if is visible with ng-show attribute

    CSS HTML how to remove whole cell links in tables?

    how to set a div to the bottom side in asp.net css

    How to clear the bottom of an image like clear left / right

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to set a image/icon width that was specified through css content property?

    CSS - How to insure that a input will be in the middle of a specific area

    How to reveal part of blurred image where mouse is hovered?

    how to show images with it's original smoothness in IE

    How to enforce a min-width for a page (css)

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    How to center jqPagination widget?

    How to create zebra-stripe CSS with TAL?

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    How to adjust Capybara finders on a site using css-modules?

    How to add/insert json data[0] etc to/in jquery $('td').css?

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to re-size image in wordpress template

    How to prevent div become two rows?

    How to add a background Image using CSS that looks like a border down each side of a div

    How I add a CSS class to first element of an array in PHP?

    how to change a css class onclick?

    How can I expand this picture to cover the width of my page?

    how to exclude tags of certain types using LESS css

    How can I set up a static Webkit Mask

    showing/hiding content is not working in JQuery/CSS

    How to use scrollRevealJS alongside AnimateCSS?

    How does one reduce the height of fontawesome text?