How to align div containers

[ModernRevolutions]

I was wondering how people put ad buttons in smaller tables. I looked it up on a person's page source and I sort of understand how they did it. I kind of wanted to do something like this, it's hard to explain: http://i42.tinypic.com/2aj0qi1.png.

I just want to put ad buttons inside the smaller tables. This is probably much more simple than I'm making it out to be. Help? :D And to clarify a bit further the person's page source that I was looking at is: http://simplyunique.info/pages/site/applications/advertise.php. Thanks so much if you can help!

I am trying to help my friend with this ^. I got the DIVs to show up, however, they are piling on top of each other instead of side by side, and THEN ontop of each other. How can i fix this? I have tried:


<td style="width: 113px;">
<div class="displayad">
<center>
<a href="http://simplyunique.info" target="_blank">
<img src="http://simplyunique.info/images/support.gif" border="0" alt"" /></a><br>
Forever
</center>
</div>
</td>

Put that didn't work. Any help would be GREATLY appreciated. Thanks :D

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.
Can I also see the CSS, and all the code? Also, why did you highlight the <td>?

[ModernRevolutions]

Site here (http://vivid-avenue.net/advertise.php). I highlight the <td> because that was what I tried.

CSS Here (http://vivid-avenue.net/layout/style.css)

[Nile]

So, just a summary before I start looking at any CSS here, you want this:
http://localhostr.com/files/52392e/capture.png
Except using divs, but instead the divs are piling up?

[ModernRevolutions]

Yes, that is indeed what I am looking for.

[Nile]

Here's the code I came up with:


<style type="text/css">
div.advertise {
}
div.advertise div.row {
clear: both;
margin: 1px;
padding: 1px;
min-height: 45px;
}
div.advertise div.row div.ad {
border: 1px solid #D8D6CF;
margin: 2px;
padding: 2px 0px 0px 0px;
width: 117px;
height: 45px;
text-align: center;
float: left;
}
div.advertise div.row div.ad span.text {
color: #494949;
font-family: arial;
font-size: 11px;
}
</style>
<div class="advertise">
<div class="row">
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
</div>
<div class="row">
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
</div>
<div class="row">
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
<div class="ad">
<img src="ad.png" class="image"/><br />
<span class="text">17 April 09 - 15 April </span>
</div>
</div>
</div>

[vincentvu]

If you are trying to put them side by side instead of pilling it up. Then you should "float" them in the same dirrection. You can use float:left, or float:right. But they must all be using same float. Then they will just be placed side by side. Make sure the total width of those divs don't exceed the width of the container.