Centrer un DIV large dans un autre DIV plus étroit

Question

J'ai deux divs, l'un imbriqué dans l'autre. Le div principal a la propriété css max-width:100% de sorte qu'il ne peut pas aller plus large que l'écran des utilisateurs. Maintenant, le deuxième div est très large (1400px), et contient beaucoup d'autres éléments, mais pas tous sur les bords doivent être vus. Donc, comment (idéalement sans Javascript) puis-je avoir le deuxième div large centré dans le premier div, de sorte que lorsque l'écran des utilisateurs est seulement 1000px large, au lieu de la première 1000px de la div large étant montré et le reste recadrée, ont recadrée à partir de la gauche et la droite, avec le 1000px étant pris du centre?

CODE

<div style="max-width:100%"> 
    <div style="position:relative;width:1400px"> 
     <!-- PICTURES, LINKS, ETC --> 
    </div> 
</div> 

Answer 1

Vous pouvez y parvenir avec une technique appelée emballage rétractable. Vous aurez besoin d'un div supplémentaire enveloppant la grande div intérieure qui le tire relativement à la gauche. Le div interne peut se corriger et se tirer à mi-chemin vers la droite par rapport à son conteneur. Cela devrait avoir l'effet que vous cherchez.

<div class="max-width-container"> 
    <div class="shrink-wrap"> 
     <div class="very-wide-inner-div"></div> 
    </div> 
</div> 

.shrink-wrap { 
    float: right; 
    position: relative; 
    left: -50%; 
} 
.very-wide-inner-div { 
    position: relative; 
    left: 50%; 
    width: $some_huge_number; 
} 

http://jsfiddle.net/2j2mh/

Answer 2

en supposant que votre html ressemble à quelque chose comme ceci:

<div class="narrow"><div class="wide">blah de blah</div></div> 

pense que vous pourriez être en mesure de le faire avec quelque chose comme ceci:

.narrow {width:1000px; overflow:hidden;} 
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;} 

la margin-left est la moitié de la largeur de la .wide div

si vous inspectez l'élément dans le violon, vous verrez qu'il est assis au milieu

http://jsfiddle.net/peteng/dtNKr/4/