So you want to sell ad space? If you want to keep your advertisers happy, make sure to stick to common form factors that are well known around the Internet. One popular size is the 125×125 px and they normally come in groups of four.

What We Are Trying to Achieve

Step 1 – Create the Container

First, we need to create a container for the ads. This way, we’re confident it will fit in our sidebar.

<div id="ad_125_container"></div>

Step 2 – Add the Ad Slots into the Container

What we want to do now is add the ad elements inside the container

<div id="ad_125_container">
     <div class="ad_125">Ad 1</div>
     <div class="ad_125">Ad 2</div>
     <div class="ad_125">Ad 3</div>
     <div class="ad_125">Ad 4</div>
</div> <!-- #ad_125_container -->

Step 3 – Style the Container

We need to tell what the container’s max width will be.

#ad_125_container {
     width: 275px;
     float: left;
}

Step 4 – Style the Ad Slot

We want to give the ad slot a width, a height, border, and margin. The margin will determine the space between each other.

.ad_125 {
	width: 125px;
	height: 125px;
	border: 1px solid #eee;
	margin: 5px;
	float: left;
}

And there you have it! Ad space for advertisers! Tweet

Michael Tao

Michael Tao is an entrepreneur of many startups including Define Magazine. His passion for business, and seeing things differently has led him to quitting his job and starting up his own company.

Homepage

Twitter Page