Skip navigation
jbdreamweaver
jbdreamweaver
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.

281 Views   6 Replies   Latest reply: David_Powers, Nov 14, 2012 6:01 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Nov 14, 2012 5:36 AM   in reply to jbdreamweaver
    Report

    <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:
  • jbdreamweaver
    Currently Being Moderated
    2. jbdreamweaver,
    Nov 14, 2012 5:43 AM   in reply to MurraySummers
    Report

    Murray,

     

    This hasnt worked unfortunately.   Do you recommend switching them to a span tag method??

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

    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:
  • jbdreamweaver
    Currently Being Moderated
    4. jbdreamweaver,
    Nov 14, 2012 5:56 AM   in reply to David_Powers
    Report

    Thats done it, thanks guys.

     

    Knew it would be something simple :-)

     

    All the best

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

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

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

    It does help.

     
    |
    Mark as:
Actions

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