Search code examples
csshtml-tablehtml-emailnewsletter

Space between tables/div's when loaded

I'm working on a html newsletter and managed to load title, thumbnail and summary through a rss feed. Now my Articles are loaded beside each other. The Problem I encountered is that I want to add space between the articles. I tried padding and cellspacing/padding without a result.

I have to mention also, that the article are loaded SEPARATALY image below.

Articles_loaded

<div class="all">
  <table style="width:300px; display:inline-block; float:left;  border-collapse: collapse;">
    <tr>
      <td>
        <div class="thumbnail" style="padding: 20px">
          <!--#image name="image" #-->
          <img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " />
          <!--#/image#-->
          <div class="title" style="text-align:center;">
            <!--#html name="title" #-->
            <h4>Thumbnail label</h4>
            <!--#/html#-->
          </div>
          <div class="description">
            <!--#html name="description" #-->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <!--#/html#-->
          </div>
          <p>
            <a href="#" class="btn btn-info btn-xs" role="button">Button</a>
            <a href="#" class="btn btn-default btn-xs" role="button">Button</a>
          </p>
        </div>
      </td>
    </tr>
  </table>
</div>

Solution

  • I would suggest to use flexbox for this and add a wrapper div to each article-containing table. See the snippet below for a basic setup of a flexbox system for your news page. If you run the snippet, switch to full page view and change the width of the browser window to see the behaviour at different sizes.

    Colors are added for illustration, only. The div.all has a grey background. The table-wrapper divs are green and the actual tables for each article are red.

    div.all {
  width: 100%;
  background: #eee;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: stretch;
}

div.all > div.table {
  flex-shrink: 1;
  background: #dfd;
}

div.table > table {
  width: 300px;
  margin: 1em;
  background: #fcc;
}
    <div class="all">
<div class="table">
  <table style="border-collapse: collapse;">
    <tr>
      <td>
        <div class="thumbnail" style="padding: 20px">
          <!--#image name="image" #-->
          <img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " />
          <!--#/image#-->
          <div class="title" style="text-align:center;">
            <!--#html name="title" #-->
            <h4>Thumbnail label</h4>
            <!--#/html#-->
          </div>
          <div class="description">
            <!--#html name="description" #-->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <!--#/html#-->
          </div>
          <p>
            <a href="#" class="btn btn-info btn-xs" role="button">Button</a>
            <a href="#" class="btn btn-default btn-xs" role="button">Button</a>
          </p>
        </div>
      </td>
    </tr>
  </table>
  </div>
  <div class="table">
  <table style="border-collapse: collapse;">
    <tr>
      <td>
        <div class="thumbnail" style="padding: 20px">
          <!--#image name="image" #-->
          <img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " />
          <!--#/image#-->
          <div class="title" style="text-align:center;">
            <!--#html name="title" #-->
            <h4>Thumbnail label</h4>
            <!--#/html#-->
          </div>
          <div class="description">
            <!--#html name="description" #-->
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
            <!--#/html#-->
          </div>
          <p>
            <a href="#" class="btn btn-info btn-xs" role="button">Button</a>
            <a href="#" class="btn btn-default btn-xs" role="button">Button</a>
          </p>
        </div>
      </td>
    </tr>
  </table>
  </div>
</div>