Results 1 to 7 of 7

Thread: How to align div containers

  1. #1
    Join Date
    Aug 2006
    Posts
    235
    Thanks
    30
    Thanked 2 Times in 2 Posts

    Default How to align div containers

    Quote Originally Posted by sparklingsky View Post
    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? And to clarify a bit further the person's page source that I was looking at is: http://simplyunique.info/pages/site/.../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:
    Code:
    <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
    ------------------
    Check out my site here and let me know what you think

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>?
    Jeremy | jfein.net

  3. #3
    Join Date
    Aug 2006
    Posts
    235
    Thanks
    30
    Thanked 2 Times in 2 Posts

    Default

    Site here. I highlight the <td> because that was what I tried.

    CSS Here
    ------------------
    Check out my site here and let me know what you think

  4. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    So, just a summary before I start looking at any CSS here, you want this:

    Except using divs, but instead the divs are piling up?
    Jeremy | jfein.net

  5. #5
    Join Date
    Aug 2006
    Posts
    235
    Thanks
    30
    Thanked 2 Times in 2 Posts

    Default

    Yes, that is indeed what I am looking for.
    ------------------
    Check out my site here and let me know what you think

  6. #6
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Here's the code I came up with:
    HTML Code:
    <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>
    Jeremy | jfein.net

  7. #7
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •