How to place 3 Adsense link ads side by side?

Question

How to place 3 Adsense link ads side by side like this ?

Answer 1

Tables are recommended for tabular data and display: flex; works only in more modern browsers, see http://caniuse.com/#search=flex

To line up side by side is enough float:

Note: If you’re using Adblock or µBlock or other similar, may block this example below, This occurs due to class adsbygoogle, which is used by Adsense. To test just temporarily shut down Adblock (or similar) or put the domain for exception.

/*faz a altura do elemento propagandas seguir a altura das propagandas, necessário para se usar junto com float*/
.propagandas::after {
    clear: both;
    content: " ";
    height: 0px;
    display: block;
}

.propagandas {
    width: 600px; /*OBSERVE: o width deve ser a soma da largura dos .adsbygoogle*/
}

/*primeira propaganda e configurações para as demais, como largura e altura*/
.propagandas .adsbygoogle {
    width: 200px;
    height: 200px;
    float: left;
    background-color: #f00; /*remova as cores, é somente para entender*/
}

/*troca a cor do segundo, use esse seletor para customizar o segundo elemento*/
.propagandas .adsbygoogle:nth-child(2) {
    background-color: #fc0; /*remova as cores, é somente para entender*/
}

/*troca a cor do ultimo*/
.propagandas .adsbygoogle:last-child {
    float: right;
    background-color: #00f; /*remova as cores, é somente para entender*/
}

<div class="propagandas">
   <ins class="adsbygoogle" 
        data-ad-client="ca-pub-xxxxxxxx"
        data-ad-slot="yyyyyy"></ins>
  
   <ins class="adsbygoogle" 
        data-ad-client="ca-pub-xxxxxxxx"
        data-ad-slot="yyyyyy"></ins>
  
   <ins class="adsbygoogle" 
        data-ad-client="ca-pub-xxxxxxxx"
        data-ad-slot="yyyyyy"></ins>
</div>

Note: Element 1 and 2 use float: left;, already the last element uses float: right; due to some situations when using the browser zoom or Quirks Mode and Standards Mode (Standards Mode is equivalent to Quirks Mode from Internet Explorer, usually occurs in browsers other than IE) the element ended up going down.

Note that it is possible to add more elements, just adjust the width: of this selector:

.propagandas {
    width: <Coloque aqui a medida da soma da largura de todos elementos>px;
}

Adjust the width and height of the banners here:

.propagandas .adsbygoogle {
    width: <Coloque aqui a largura padrão dos banners>px;
    height: <Coloque aqui a altura padrão dos banners>px;
    float: left;
    background-color: #f00;
}

If you want to adjust the width of a specific banner, use the :nth-child(), for example, if you have 5 banners and you want the fourth banner to have different measure:

.propagandas .adsbygoogle:nth-child(4) {
    width: <Coloque aqui a largura do banner especifico>px;
    height: <Coloque aqui a altura do banner especifico>px;
}

Answer 2

See if this way helps you:

#ad {
  height: 100%;
  min-height: 100%;

  /* habilita o flex nos filhos diretos */
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;

  /* centraliza na horizontal */
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<div id="ad">
<table>
<td><img width="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
<td><img width="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
<td><img width="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
</table>
</div>