How to place 3 adsense link ads side by side?

Question

How to place 3 adsense link ads side by side?

Navigation

#1 by (5 votes)
#2 by (1 votes)

4

How to put 3 adsense link ads side by side like this?

html css google-adsense

asked by anonymous 14.01.2017 / 21:55

2 answers

Meaning of the term "Fluid Layout" How can I make a new year script?

score 5 · Answer 1

Tables are recommended for tabular data and display: flex; works only in more modern browsers, see link

To align side by side, float:

If you are using Adblock or μBlock or a similar one, you may want to block this example below, this is due to class adsbygoogle , which is used by AdSense . To test, just temporarily turn off 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; , since the last element uses float: right; due to some situations when browser zoom or < a Quirks Mode and Standards Mode ( Standards Mode is equivalent to Quirks Mode of Internet Explorer, usually occurs in browsers other than IE)

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;
}

Set the width and height of 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 :nth-child() , for example if you have 5 banners and you want the fourth banner to have a different size:

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

score 1 · Answer 2

See if this 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><imgwidth="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td><td><imgwidth="200" src="http://www.wowcubo.com.br/img/icon-anunciogoogle.png"/></td>
</table>
</div>