Comment puis-je faire flotter deux divs dans un conteneur centré avec l'un d'eux saigner vers le bord de la fenêtre

Question

Salut, je suis sûr que cela a été répondu, mais je n'arrive pas à trouver ce que je cherche. Je voudrais avoir un conteneur avec une largeur maximale et une marge automatique, puis à l'intérieur de deux div flottant l'un à côté de l'autre (les deux prenant 50% du conteneur) mais celui de droite saigne le conteneur jusqu'au bord de la viewport? Comme ci-dessous avec la ligne blanche en pointillés étant le conteneur et le noir le navigateur.

[exemple ici] [1]

modifier - désolé, j'oublié de mentionner les divs doivent être à la même hauteur, donc si la gauche a moins de contenu que le droit dont il a besoin d'être toujours la même hauteur comme le droit, un peu comme si je les faisais table-cellule.

.container { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1260px; 
} 

.table{ 
    display:table; 
    table-layout: fixed; 
    width:100%; 

    .left, .right{ 
     display:table-cell; 
     vertical-align: top; 
     width:50% 
    } 
} 

html

<div class="container"> 
    <div class="table"> 
     <div class="left"> 
      content 
     </div> 
     <div class="right"> 
      content 
     </div> 
    </div> 
</div> 

J'ai essayé l'ajuster en fonction de cette réponse, mais il empile

http://jsfiddle.net/gxG4W/2/

Answer 1

Vous devriez essayer d'amorçage pour cela. J'espère que cela vous aidera. Vérifiez cela en maximisant la fenêtre du navigateur. Bootstrap Column

.container { 
 
    border: solid; 
 
} 
 

 
h4 { margin-bottom: 30px; } 
 

 
.row { 
 
    margin-bottom: 20px; 
 
} 
 
.row .row { 
 
    margin-top: 10px; 
 
    margin-bottom: 0; 
 
} 
 
.left-div 
 
{ 
 
    border: solid red; 
 
} 
 
.right-div 
 
{ 
 
    border: solid green; 
 
}

<div class="container text-center"> 
 
    <div class="row"> 
 
     <h4>Two Columns</h4> 
 
     <div class="col-lg-6 col-md-6 left-div"> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 right-div"> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     <p> 
 
     test div  
 
     </p> 
 
     </div> 
 
     </div> 
 
      
 
    
 
</div>

Answer 2

ok j'ai à peu près fixe moi-même maintenant, je ne sais pas si c'est la meilleure façon de le faire et il ne fait pas la même hauteur de la div comme avec le tour de table, donc j'aurai besoin de nous pour faire ça je suppose. Mais voici ma solution.

<div class="container"> 
     <div class="left"> 
      Lorem ipsum dolor sit amet 
     </div> 
     <div class="right"> 
      Lorem ipsum dolor sit amet 
     </div> 
    </div> 

css

.container{ 
    max-width:500px; 
    margin:0 auto; 
    background:red; 
    padding:10px 0; 
} 

.container::after{ 
    content:" "; 
    clear:both; 
    display:block; 
    float:none; 
} 

.left{ 
    float:left; 
    width:50%; 
    background:green; 
} 

.right{ 
    background:blue; 
    width:50vw; 
    margin-left:50%; 
} 

https://jsfiddle.net/shbkxcgw/4/