Display Two Div Columns Side By Side In A Row, Such That It Works With AMP (Accelerated Mobile Pages) As Well

I’m trying to display an image (thumbnail) on the left and some text (in a h3 tag) on the right.

Here’s my code:

CSS

/* Create two equal columns that floats next to each other */
.techrbunrelatedarticlescolumn {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.techrbunrelatedarticlesrow:after {
  content: "";
  display: table;
  clear: both;
}

PHP

<?php while (have_posts()) : the_post(); ?>
        <?php if (has_post_thumbnail()):?>
        <a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="techrbunrelatedarticlesrow">
  <div class="techrbunrelatedarticlescolumn" style="padding-right:10px;">
  <img height="200" max-width="300" title="<?php the_title(); ?>" src="<?php the_post_thumbnail_url(); ?>">
  </div>
  <div class="techrbunrelatedarticlescolumn">
    <h3><?php the_title(); ?></h3>
    
  </div>
</div>
</a>
<br/>

        <?php endif; ?>
    <?php endwhile; ?>

This works absolutely fine normally. But, when I activate the amp plugin (which removes all the elements that are not allowed in AMP), the image starts to display above the text, which breaks the structure.

Can anyone help me figure out a way such that it works without violating the limitations of AMP?

Answer

The actual problem was that I was unaware that you can’t just declare blocks anywhere you want to.. AMP just allows one style block per page. Fixed the issue by putting all the CSS under a single block!

Advertisement

Answer