Show 3 ads side by side, centered in width, responsive how?

Hello! I need to show 3 ads side by side in page, centered in the page, in a responsive way. (so if I narrow browser window should be less space between them, or better still, it its too narrow, one in one row, the sencond in a second row, the third in a third row).

I guess the old using 100% width would work in principle, (excetp for the resonsive behaviour) but I’d like some actual code.
Any code sample would be highly appreciated. Can you help me out with this? Thank you!

Hi there silverbytes,

here is one possible method…

<!DOCTYPE html>
<html  lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple three column layout</title>

<style media="screen">
body {
    font: 1em/1.5em arial,helvetica, sans-serif;
    background-color:#fcf6f6;
 }
h1 {
    font-size: 1.8em;
    color: #666;
    text-align: center;
 }
#container {
    display: flex;
    max-width: 62.5em;
    padding: 0.8em 0.5em;
    margin: auto;
    border: 0.1em solid #999;
    box-sizing: border-box;
    box-shadow: 0.6em 0.6em 0.6em #999;
    color: #666;
    background-color: #fff;
 }
.box {
    width: 33.3%;
    padding: 0.6em;
    margin: 0 0.35em;
    border: 0.1em solid #999;
    box-sizing: border-box;
    background-color: #efefef;
 }
.box img {
    display: block;
    width: 100%;
    border: 0.1em solid #999;
    box-sizing: border-box;
 }
@media screen and (max-width:40em) {
#container {
    display: block;
    padding: 0.6em 0.6em 0;
  }
.box {
    width:auto;
    margin: 0 0 0.6em;
  }
 }
</style>

</head>
<body>

<h1>Simple three column layout</h1>

<div id="container">

<div class="box">
 <img src="face-1.jpg" alt="">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
  bibendum tempus faucibus
 </p>
</div>

<div class="box">
 <img src="gaze.gif" alt="">
 <p>
  Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
  sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc.Fusce ac nisi ac magna scelerisque finibus a.
</p>
</div>

<div class="box">
 <img src="face-2.jpg" alt="">
 <p>
  Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
  purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
  Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
  nulla tellus vulputate ex, vitae euismod erat lectus et magnis dis parturient montes, nascetur.
 </p>
</div>

<!-- #container --></div>

</body>
</html>

coothead

2 Likes

Wow! Super reply, Super fast.
Awesome. Thank you!

I’m noticing that the 3 ads remain aligned to the left (specially if I narrow browser window) instead being centred on screen… my attepmts to correct that were unsuccessful.

Can you help me out on that too?

At this point you need to supply some HTML and CSS so we can see how you have coded the ads and their containers. Apparently they are different than @coothead’s example.

Perhaps you can construct a “working page” that demonstrates the behavior like coothead did for you.

Here it goes http://goo.gl/8ISCUf
(the 3 ads are almost at bottom of page)

And by the way: the gray squares around the ads, seems the bottom margin is higher than any other. Couldn’t make it the same than others…

.boxflex {
width: 33.3%;
padding: 0.35em;
margin: 0.35em 0.35em 0.35em 0.35em;
border: 0em solid #999;
box-sizing: border-box;
background-color: #eee;

Shouldn’t “margin” do that?

Hi there silverbytes,

here are your three adverts in a line…

<!DOCTYPE html>
<html  lang="en">
<head>
<base href="http://www.bombinhas.org/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple three column layout</title>
<style media="screen">
#container {
    display: flex;
    align-items: center; 
 }
.box {
    width: 33.3%;
    margin: 0 0.35em;
 }
.box img {
    display: block;
    width: 100%;
 }
@media screen and (max-width:40em) {
#container {
    display: block;
  }
.box {
    width: auto;
    margin: 0 0 0.6em;
  }
 }
</style>
</head>
<body>
<div id="container">
<div class="box">
 <a href="http://www.onlinehoteles.com" title="Online Hoteles">
  <img src="img/banner-online640.jpg" alt="Online Hoteles">
 </a>
</div>
<div class="box">
 <a href="http://www.bariloche.esp.br" title="Bariloche">
  <img src="img/banner-bariloche-640.jpg" alt="Bariloche">
 </a>
</div>
<div class="box">
 <a href="http://www.villalaangostura.com.br" title="Villa la Angostura">
  <img src="img/banner-villalaangostura-640.jpg" alt="Villa la Angostura">
 </a>
</div>
<!-- #container --></div>
</body>
</html>

coothead

Sorry, I mean the 3 adsense ads (they are below those).

are you referring to those three minute light grey squares?

They don’t look like adverts to me.

What font size are you employing? :mask:

coothead

Yes. But Sounds like you are using an adblock addon on your browser.
should look like this: http://s32.postimg.org/pwtnegwd1/ads.jpg

Coothead: those are 250 pixels wide ads (I see them correctly they sould be as in the screen capture posted). Can you confirm you do see it? (please empty cache, in case you saw a code modification made yesterday). Looks fine to me (but not centered when I narrow the browser window)

I shortened the url here:
http://bit.ly/1THZ1gC

Yes, they are visible if AdBlock is disabled and JavaScript is enabled.

Thanks ronpat.

So how do I get that block centered then? and make the ads be centered in the gray square too (al margins equal)?

Hi there silverbytes,

I think that the problem probably lies here…

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-0123386179416224"
     data-ad-slot="5005252135"></ins>

Your ads are fixed width “Medium Rectangle” rather than flexible “Responsive”. :scream:

Have you considered changing the format?

coothead

That wouldn’t help because flexible causes the ads be whatever size or format. And I like (and most important performance for 300x250 ads is good) the format they have.
However I’d wish those to be centered instead left aligned

Well, the code that I posted is not made for fixed widths. :ng:

You need to use media queries set to max-widths of about 930px, 630px and 330px. :ok:

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.