Question re Div Tags?

Discussion in 'Website Development & Design' started by Fergal, Mar 16, 2010.

  1. Fergal

    Fergal
    uix_expand uix_collapse
    Premium Member
    Premium Member

    Joined:
    Nov 18, 2007
    Messages:
    10,578
    Likes Received:
    1,163
    Is it possible to put two separate elements side by side on a web page (i.e. on the same line, without any line or paragraph break between them), when one of those elements is inside a div tag?

    For example I'd like to place these two banner ads beside each other, so that they appear on the same line.

    Code:
    <a href="http://gyhseo.go2jump.org/aff_c?offer_id=1&aff_id=8" target="blank"> <img src="ads/gyh_free_seo.gif" alt="Free SEO" /> </a> 
    Code:
    <!-- BuySellAds.com Ad Code -->
    <script type="text/javascript">
    (function(){
      var bsa = document.createElement('script');
         bsa.type = 'text/javascript';
         bsa.async = true;
         bsa.src = '//s3.buysellads.com/ac/bsa.js';
      (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
    })();
    </script>
    <!-- END BuySellAds.com Ad Code -->
    Thanks!
     
  2. realitybites.in

    realitybites.in
    uix_expand uix_collapse
    Member

    Joined:
    Apr 23, 2009
    Messages:
    368
    Likes Received:
    0
    We can do it using CSS
     
  3. Fergal

    Fergal
    uix_expand uix_collapse
    Premium Member
    Premium Member

    Joined:
    Nov 18, 2007
    Messages:
    10,578
    Likes Received:
    1,163
    Thanks, what CSS code would I need to use, to display the two ads above side by side?
     
  4. realitybites.in

    realitybites.in
    uix_expand uix_collapse
    Member

    Joined:
    Apr 23, 2009
    Messages:
    368
    Likes Received:
    0
    Div
    Code:
    <div class="img">
    <a href="http://gyhseo.go2jump.org/aff_c?offer_id=1&aff_id=8" target="blank"> <img src="ads/gyh_free_seo.gif" alt="Free SEO" /> </a>
     
    </div>
    <div class="img">
     <!-- BuySellAds.com Ad Code -->
    <script type="text/javascript">
    (function(){
      var bsa = document.createElement('script');
         bsa.type = 'text/javascript';
         bsa.async = true;
         bsa.src = '//s3.buysellads.com/ac/bsa.js';
      (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
    })();
    </script>
    <!-- END BuySellAds.com Ad Code -->
     
    </div>
    
    CSS

    Code:
     div.img
    {
      margin: 2px;
      border: 1px solid #0000ff;
      height: auto;
      width: auto;
      float: left;
      text-align: center;
    }	       

    Do Some Changes As per the requirement
     
  5. Fergal

    Fergal
    uix_expand uix_collapse
    Premium Member
    Premium Member

    Joined:
    Nov 18, 2007
    Messages:
    10,578
    Likes Received:
    1,163
    Thanks realitybites.in, looks like just what I need, thanks a lot for that. I haven't done any CSS or HTML coding in quite some time, it would take me ages, to work that out for myself.
     
  6. houstonVijai

    houstonVijai
    uix_expand uix_collapse
    Member

    Joined:
    Feb 24, 2010
    Messages:
    76
    Likes Received:
    3
    You can also do it by using table.
    <table>
    <tr>
    <td><a href="http://gyhseo.go2jump.org/aff_c?offer_id=1&aff_id=8" target="blank"> <img src="ads/gyh_free_seo.gif" alt="Free SEO" /> </a>
    </td>
    <td>
    <!-- BuySellAds.com Ad Code -->
    <script type="text/javascript">
    (function(){
    var bsa = document.createElement('script');
    bsa.type = 'text/javascript';
    bsa.async = true;
    bsa.src = '//s3.buysellads.com/ac/bsa.js';
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
    })();
    </script>
    <!-- END BuySellAds.com Ad Code -->

    </td>
    </tr>
    </table>

    DIV and table works in this situation.
     
  7. Fergal

    Fergal
    uix_expand uix_collapse
    Premium Member
    Premium Member

    Joined:
    Nov 18, 2007
    Messages:
    10,578
    Likes Received:
    1,163
    Thanks a lot for that houstonVijai, that's helpful. I may use that, if I can still keep the ads centred, on the page.
     
  8. houstonVijai

    houstonVijai
    uix_expand uix_collapse
    Member

    Joined:
    Feb 24, 2010
    Messages:
    76
    Likes Received:
    3
    YOu might be able to do that by add attributes to the table like

    <table width="100%" align="center">

    Vijai
     
  9. Fergal

    Fergal
    uix_expand uix_collapse
    Premium Member
    Premium Member

    Joined:
    Nov 18, 2007
    Messages:
    10,578
    Likes Received:
    1,163
    Thanks Vijai, I will play around with it, when I'm inserting the ads and post back if I have any difficulties making it work.
     

Share This Page