Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    I'm trying to get the div at the bottom "accordian-iframe-container", to align to the right by using inline as a display for the bigger container "exhibitions-container" instead of floating the iframe container to the right. What am I doing wrong?

    http://www.danperceval.com/exhibitions.php

    HTML:
    HTML Code:
    <div id='exhibitions-container'>
    
                                <h2 class='page-title'>Exhibitions:</h2>
    
                                <div id='accordian-container'>
                                  <p title='accordian-title'><strong>Exhibitions &amp; Demonstrations:</strong></p>
                                  <div class="menu_list" id="secondpane">
                                        <p class="menu_head">2006</p>
                                        <div class="menu_body">
                                        <a href="#"><p>Link-1</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                        <p class="menu_head">2007</p>
                                        <div class="menu_body">
                                        <a href="http://www.youtube.com/embed/bLTMGgb7pnQ?list=PL2D8E6E709F26FDBC&wmode=transparent" alt="isjbaan Leovon, Belgium exhibition - 2007"><p>isjbaan Leovon, Belgium - 2007</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                        <p class="menu_head">2008</p>
                                        <div class="menu_body">
                                          <a href="#"><p>Link-1</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                        <p class="menu_head">2009</p>
                                        <div class="menu_body">
                                          <a href="#"><p>Link-1</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                        <p class="menu_head">2010</p>
                                        <div class="menu_body">
                                          <a href="#"><p>Link-1</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                        <p class="menu_head">2011</p>
                                        <div class="menu_body">
                                          <a href="#"><p>Link-1</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                        <p class="menu_head">2012</p>
                                        <div class="menu_body">
                                          <a href="#"><p>Link-1</p></a>
                                        <a href="#"><p>Link-2</p></a>
                                        <a href="#"><p>Link-3</p></a>
                                        </div>
    
                                    </div> <!--END accordian MENU ------->
                                  </div> <!--- END accordian CONTAINER -->
    
                                  <div id='accordian-iframe-container'>
    
                                        <div id='video-title-container'>
                                            <p class='indent'><strong>Title:</strong></p>
                                        </div>
                                          <iframe id='accordian-iframe' src="https://www.youtube.com/embed/?listType=playlist&list=PL283E601D92250A17&wmode=opaque" frameborder="0" allowfullscreen></iframe>
    
                                  </div>
    
                          </div>
    CSS:
    Code:
    #exhibitions-container {
        margin:0px auto;
        padding-top:10px;
        width:1132px;
        display:inline;
        position:relative;
    }
    
    #accordian-container {
        margin-top:20px;
        margin-left:30px;
        margin-right:20px;
        width:275px; /* Height is left out so the menu can expand 'load-content' container. */
        display:block;
    }
    
    [title~=accordian-title] {
        text-indent:10px;  /* Tells the <p> tag title under accordian div to indent text 20 pixels. */
    }
    
    #accordian-iframe-container {
        margin-left:10px;
        width:600px;
        height:370px;
        display:inline-block;
    }
    
    #video-title-container {
        width:300px;
        height:50px;
        margin-top:10px;
        vertical-align:text-bottom;
        display:inline;
    }
    
    #accordian-iframe {
        width:528px;
        height:300px;
        display:block;
    }

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Using inline doesn't have any affect on the position of a div.

    You either have to float it, ( make sure to clear the float after it ), or use the left-margin attribute to push the entire thing to the right.

    Try a % for your left margin... Remember the % is defined as a % of any parent div this one may be in.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com