Creating image box below each other.

How can i create something like this, where the image on is on the left and i can add text, and then the next image is on the right, and so on

 

<div class="alternatingPlates">
  <img src="test.png" alt="describe the image, alt is not optional">
  <p>
    Sample text
  </p>
  <img src="test.png" alt="describe the image, alt is not optional">
  <p>
    Even More Sample text
  </p>
<!-- .alternatingPlates --></div>

Code (markup):

.alternatingPlates > img {
  clear:both;
}
.alternatingPlates > img:nth-of-type(even) {
  float:left;
  margin:0 1em 1em 0;
}
.alternatingPlates > img:nth-of-type(odd) {
  float:right;
  margin:0 0 1em 1em; 
}

Code (markup):

Give or take. Beware, nth-of-type doesn't exist in IE8/earlier if you still care and are still trying to send style to said outdated browsers. MY advice, stop caring about -- and stop sending style to -- outdated browsers. Let them eat vanilla markup.

nth-of-type is a relatively new CSS property (if a decade can be called "new") that can save you a lot of excess "classes for nothing" in your markup.

-- edit -- Oh, and if you don't want the content next to the images to slip under said images? Add some div:

<div class="alternatingPlates">
  <img src="test.png" alt="describe the image, alt is not optional">
  <div>
    <p>
      Sample text
    </p>
  </div>
  <img src="test.png" alt="describe the image, alt is not optional">
  <div>
    <p>
      Even More Sample text
    </p>
  </div>
<!-- .alternatingPlates --></div>

Code (markup):

and then set those inner DIV to overflow:hidden.

.alternatingPlates > div  {
  overflow:hidden;
}

Code (markup):

Which makes the entire container obey the floats, not just the inline child elements.

You could also use flex, but that COULD involve needing extra containers depending on how you go about coding it. Sometimes good old float is easier, sometimes it isn't.

 

Thank you, but I am using this instance for the image, because it is openseadragon plugin via wordpress.
How would I replace ur test.png with this
[gallery openseadragon="true" width="700" height="500" ids="7816"]

 

No clue, you couldn't pay me enough $$$ at this point to work with the steaming pile of ignorant incompetent inept BULL that is turdpress, much less some dipshit garbage plugin for it. Particularly when such mentally enfeebled trash plugins are most always written by people who have ZERO business writing a single damned line of HTML or CSS.

But let me tell you what I really think...

That said, what's it vomiting up for HTML? That it's dealing with fixed width and height declarations in their idiotic template crap certainly doesn't help, but at the end of the day that bekaptah chazerie has to be turned into markup... so "view source" and see what it's actually outputting.