Faire flotter le contenu latéral toujours au centre?

Question

Comment faire pour que le contenu d'une diapositive flotte toujours sur le côté droit centré verticalement? Alors que lorsque le contenu est trop long, la diapositive sera toujours au centre?

Voici une capture d'écran.

Im en utilisant ce jscrpt

<script> 
        function toggleDiv(divNum) { 

         $("#close").hide(); 
         $("#center-content").removeClass("width-400px"); 
         $("#right-content").animate({ 
           right: '-400' 
          }, 350, 
          function() { 
           $("#center-content").addClass("width-400px"); 
           $(".slide").hide(); 
           if ($("#div" + divNum)) { 
            $("#div" + divNum).show(); 
           } 
           $("#right-content").animate({ 
             right: '0' 
            }, 350, 
            function() { 
             $("#close").show(); 

            }); 
          }); 
        } 

        $(document).ready(function() { 
         $("#close").on("click", function(e) { 
          $("#right-content").animate({ 
           right: '-400' 
          }, 350); 
          $("#center-content").removeClass("width-400px"); 
          $(this).hide() 
         }) 

        }) 
       </script> 

Et voici mon CSS

.slide { 
     width: 400px; 
     height: 100%; 
     position: absolute; 
     #right: -400px; 
     background: #6b4788; 
    } 
    #close { 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     color: white; 
     font-size: 28px; 
     font-family: ovo; 
     z-index: 10; 
     letter-spacing: 5px; 
     font-weight: 100; 
     padding: 43px 104px 34px 116px; 
     background: #4d3065; 
    } 
    body { 
     overflow: hidden; 
    } 
    #main-content { 
     position: absolute; 
     width: 100%; 
    } 
    #right-content { 
     position: absolute; 
     right: -400px; 
     top: 0; 
     overflow: hidden; 
     width: 400px; 
     height: 100%; 
    } 

Html ici pour appeler:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div class="main-content"> 
    <div id=""> 
     <center> 
      <div id="furugganan"> 
       <center><img src="furugganan-logo.png"> 
       </center> 
       <div id="container"> 
        <div id="firstrow"> 
         <a onClick="toggleDiv(1)"><img src="alfonsoponce-a.png" id="alfonso"> 
         </a> 
         <a onClick="toggleDiv(2)"><img src="female-a.png" id="female" style="margin-left: 30px;"> 
         </a> 
        </div> 
    </div> 

Et le bon contenu:

<div id="right-content"> 
        <div id="close">CLOSE (X)</div> 
        <div class="slide" id="div1"> 
         <center> 
          <img src="crest.png" style=" 
    /* z-index: -1; */ 
    opacity: 0.1; 
    position: absolute; 
    left: 39px; 
    top: 371px; 
    height: 354px; 
"> 
          <img src="sample-pic.png" style="height: 262px; margin-top: 12%;"> 
          <h3>ALFONSO PONCE ENRILE</h3> 
          <hr style="width: 90px;margin-top: -7px;"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti.</p> 
          <hr style="width: 90px;margin-top: 22px;"> 
          <h1 style="margin-top: 30px;">LOREM: 1</h1> 
          <h1>LOREM: 2</h1> 
          <h1>LOREM: 3</h1> 
          <h1>LOREM: 4</h1> 
          <h1>LOREM: 5</h1> 

        </div> 
</div> 

Answer 1

Try this: 

/*This is the element which holding the side content 
    by giving the property of overflow, it lets you 
    float the side element without affecting the content 
    flow*/ 

.container-of-side{  
    margin: 0 auto; 
    width: 950px; 
    overflow: auto; 
} 

.side{ 
    float: left; /*then float the element*/ 
} 

Answer 2

Je pense régler la position #right-content css à position:fixed; et mis corps { overflow-x : hidden;} fixer le css probeleme

s'il vous plaît voir ci-dessous l'extrait:

function toggleDiv(divNum) { 
 
    //removing px word from width size 
 
    if(slideWidth) 
 
     slideWidth = slideWidth.replace("px",""); 
 
    else slideWidth=200; 
 
    
 
    $("#close").hide(); 
 
    $("#center-content").removeClass("width-slide"); 
 
    $("#right-content").animate({right:-slideWidth},350, 
 
    function(){ 
 
     $("#center-content").addClass("width-slide"); 
 
     $(".slide").hide(); 
 
     if($("#div"+divNum)) { 
 
     $("#div"+divNum).show(); 
 
     } 
 
     $("#right-content").animate({right:'0'},350, 
 
     function(){ 
 
     $("#close").show(); 
 
      
 
     }); 
 
    }); 
 
} 
 
var slideWidth = 200; 
 
    
 
$(document).ready(function(){ 
 
    slideWidth = $("#right-content").css("width"); 
 
    
 
    $("#close").on("click",function(e){ 
 
     $("#right-content").animate({right:-slideWidth},350); 
 
     $("#center-content").removeClass("width-slide"); 
 
     $(this).hide() 
 
    }) 
 

 
})

.slide { 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0; 
 
    background:#d2d2d2; 
 
} 
 

 

 

 
#close { 
 
    position:absolute; 
 
    right:10px; 
 
    top:10px; 
 
    z-index:10; 
 
    display:none; 
 
} 
 

 
body { 
 
    overflow-x:hidden; 
 
} 
 

 
#main-content { 
 
    position:absolute; 
 
    width:100%; 
 
} 
 

 
#right-content { 
 
    position:fixed; 
 
    right:-400px; 
 
    top:0; 
 
    #overflow:hidden; 
 
    width:400px; 
 
    height:100%; 
 
} 
 

 

 

 
#center-content { 
 
    border:1px solid black; 
 
    margin:auto; 
 
    text-align:center; 
 
    z-index:1000; 
 
    width:100%; 
 
    float:left; 
 
    transition:width .35s ease; /* here set the transition */ 
 
} 
 

 
/*class to set width -200px*/ 
 
.width-slide { 
 
    width: calc(100% - 400px) !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main-content"> 
 
    <div id="center-content"> 
 
    <button onClick="toggleDiv(1)">Try it 1</button><div style="height:300px"></div> 
 
    <button onClick="toggleDiv(2)">Try it 2</button><div style="height:300px"></div> 
 
    <button onClick="toggleDiv(3)">Try it 3</button><div style="height:300px"></div> 
 
    
 
    </div> 
 
    <div id="right-content"> 
 
    <div id="close">X</div> 
 
    <div class="slide" id="div1">content 1</div> 
 
    <div class="slide" id="div2">hey I'm content 2</div> 
 
    <div class="slide" id="div3">Now it's content 3</div> 
 
    <div> 
 
</div>