Align 125x125 ads ?

okkzz · 11-10-2010, 09:02 PM

Hello, I'm making a blog on which I want to put 125x125 ads.
I'm facing a problem tho, I want my 4 ads to be like this:

And what I get is this :

With the following code :

Code:

<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
 
<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
 
<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
 
<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>

How can I do it ?
Thanks !

Excavator · 11-10-2010, 10:17 PM

Hello okkzz,
Using floats is how you put thing beside each other. The natural flow of a float is to drop to the next line when there is not enough room for it. By putting the 4 floats in a container and specifying a width that is wide enough for 2 of them (plus their margins) you can make your 4 ads form a square.

Try it like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #000;}
#wrapper {
	width: 270px;
	margin: 50px auto;
	overflow: auto; /*to clear the floats*/
	background: #ff0; /*a bg color for demonstration only*/
}
p {
	width: 125px;
	margin: 5px;
	padding: 0;
	float: left;
	line-height: 12px;
	font-size: 10px;
	text-align: center;
	color: #2AB8E7;
}
</style>
</head>
<body>
    <div id="wrapper">
		<p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p> 
        <p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p> 
        <p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p> 
        <p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
    <!--end wrapper--></div>
</body>
</html>

okkzz · 11-10-2010, 11:45 PM

Thanks a lot it's working like a charm

Sorry for this noobish question, I'm using a blogger template, and trying hard to make a nice blog but it's complicated as I have no clue about coding

So thanks