Skip navigation
Currently Being Moderated

Two scripts not aligning correctly, 200px Width each, Link inside

Nov 14, 2012 5:26 AM

Tags: #dreamweaver #alignment #twitter

Hello all,

 

I have a slight problem, I am attempting to align a twitter script and another script on one page, next to eachother, yet no matter how small I make the width of the style div, they remain on two individual alignments, one below the other.  I have attempted to close the first DIV after the second but to no avail.

 

Link:

 

http://entasistours.com/twitter.html

 

Style:

 

.debate{

height:1000px;
width: 200px;
margin-top: 20px;
margin-left: 8px;

 

}

 

Code:

 

<div class="clear"> </div>

 

<div class="debate">

<a class="twitter-timeline"  href="https://twitter.com/entasis" data-widget-id="268698405683994624">Tweets by @entasis</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.cr eateElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs .parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");< /script>

</div>

 

 

<div class="debate">

<script>

var idcomments_acct = 'e1b1a147378ac51e02992098d4ac0571';

var idcomments_post_id;

var idcomments_post_url;

</script>

<span id="IDCommentsPostTitle" style="display:none"></span>

<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>

</div>

 

<div class="footer">

 

----

 

Many thanks in advance for any help.

 
Replies
  • Currently Being Moderated
    Nov 14, 2012 5:36 AM   in reply to jbdreamweaver

    <div> is a block tag, as opposed to <span> which is an inline tag.  A block tag fills the width of its container, thereby forcing adjacent code to fall on a new horizontal line.  The only way to make two adjacent block tags sit on the same horizontal line is to float one or both of them.  To be floated, you must specify an explicit width and a float direction for each floated element in your CSS.  So for example,

     

    .debate {

    width:200px;

    height:1000px;

    margin:20px 0 0 8px;

    float:right;

    }

     

    See if that does what you want.

     

    In addition, though, I also have to say that it's a very poor technique to assign an explicit height to any container that will have text content in it. The usual method is to let the contents determine the height of the container.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2012 5:50 AM   in reply to jbdreamweaver

    The reason Murray's suggestion doesn't work is because the second debate div is nested inside the first. They need to be separate.

     

    You have this:

     

    <div class="debate">

        <div class="debate">

        </div>

    </div>

     

    It should be this:

     

    <div class="debate">

    </div>

    <div class="debate">

    </div>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2012 5:58 AM   in reply to David_Powers

    Dang!  I used the code he posted. You took it from his link!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2012 6:01 AM   in reply to MurraySummers

    It does help.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points