PDA

View Full Version : 120x120 Ad alignment



cheesyrush
Oct 15th, 2009, 08:10 AM
hey,
how do i align 4 125x125 box ads in a box format within a 300px width.
like this:

AD-AD
AD-AD

Thanks

met
Oct 15th, 2009, 09:14 AM
.box { width:278px; padding:10px; border:1px solid black; } /*278+10+10+1+1 = 300 */
.ad { float:left; width:125px; height:125px; margin:10px 7px 10px 7px; background:red; }
.ad img { border:0; margin:0; padding:0; }
.boxclear { clear:left; }
<div class="box">
<div class="ad"></div>
<div class="ad"></div>
<div class="ad"></div>
<div class="ad"></div>
<div class="boxclear">/div>
</div>
</body>
</html>



produces a box with 4 divs you can add 125x125 px content in to.

if it's just for images use



.box { width:278px; padding:10px; border:1px solid black; }
.box img { float:left; width:125px; height:125px; margin:10px 7px 10px 7px; }
.boxclear { clear:left; }


instead



<div class="box">
<img src="Untitled-1.jpg" width="125" height="125">
<img src="Untitled-1.jpg" width="125" height="125">
<img src="Untitled-1.jpg" width="125" height="125">
<img src="Untitled-1.jpg" width="125" height="125">
<div class="boxclear"></div>
</div>


edit: the images won't be perfectly aligned with the center of the box as its a "funny" size, the box is 300px, two images are 250px, means you have 50px of empty space to play around with - padding, borders, etc. The way above is ~reasonably~ centered.

cheesyrush
Oct 15th, 2009, 12:05 PM
thanks,but do you have a css way?

Wayners
Oct 15th, 2009, 02:23 PM
the above is css.

nick1988
Oct 15th, 2009, 04:34 PM
Like Wayners has said, the above is css.

met has put it inside php tags though.

met
Oct 15th, 2009, 07:20 PM
Like Wayners has said, the above is css.

met has put it inside php tags though.

i like the pretty colours