2 divs de différentes tailles centrées

Je rencontre un problème avec la position div. Mon site Web pour référence est;2 divs de différentes tailles centrées

La question que j'ai est difficile à expliquer. J'ai un div wrapper de 1000px qui est divisé en deux sections; l'un étant 350px et l'autre étant 650px. L'enveloppe est destinée à être centrée sur la page, et les côtés gauche et droit correspondent à ce centre. J'aurais besoin des divs pour étirer la largeur et la longueur de la page pour couvrir les côtés de leur couleur correspondante.

Est-ce possible?

Édition rapide;

J'ai dessiné une image pour mieux illustrer mon problème:

http://i.stack.imgur.com/UsRJG.jpg

La ligne rouge représenterait le milieu de la page, l'ensemble de contour noir serait la div wrapper et les 2 couleurs séparées intérieures sont les 2 divs à l'intérieur. J'ai besoin d'eux pour maintenir leur position centrale sur la page, mais aussi être en mesure de sortir pour remplir la page.

Source

2011-07-27 Brett

Donc, sont la largeur fixe de la div (350px et 650px) ou ont-ils besoin de s'étirer pour remplir la page? Vous ne pouvez pas avoir les deux évidemment! – BonyT

Lorsque vous demandez une aide relative à la CSS sur le Web, essayez de reproduire le problème à l'aide d'un petit exemple de code et publiez l'exemple de code. Ne vous attendez pas à ce que tout le monde passe par le HTML et le CSS de votre site Web. –

Comme je l'ai dit je n'étais pas sûr de savoir comment l'expliquer correctement lol. Fondamentalement, j'ai besoin des divs à un moment précis sur l'écran des utilisateurs à tout moment. Pensez-y comme deux divs de 50% de largeur, mais j'ai besoin d'eux pour se déplacer vers la gauche de la 50% de l'écran dire 100px. Les pourcentages ne fonctionnent pas parce que 60% et 40% sur un grand écran finissent par se décentrer. Je n'ai pas vraiment écrit de code parce que je n'étais pas sûr si c'était possible ... – Brett

Vous pouvez centrer horizontalement le wrapper en définissant ses marges gauche et droite sur auto. Par exemple, les éléments suivants centreraient horizontalement un élément div avec l'ID wrapper.

div#wrapper { 
    margin-left: auto; 
    margin-right: auto; 
}

Un exemple complet:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>test</title> 
     <style type="text/css"> 
     div#wrapper { 
      width: 1000px; 
      margin-left: auto; 
      margin-right: auto; 
      overflow: hidden; 
      border: 1px solid gray; 
     } 

     div#left { 
      float: left; 
      width: 50%; 
      background: #bbccdd; 
     } 

     div#right { 
      float: right; 
      width: 50%; 
      background: #ddeeff; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="left"> 
       foo<br /> 
       foo<br /> 
       foo<br /> 
       foo<br /> 
      </div> 
      <div id="right"> 
       bar<br /> 
       bar<br /> 
       bar<br /> 
       bar<br /> 
      </div> 
     </div> 
    </body> 
</html>

Notez que lorsque vous utilisez float dans un élément div, le confinement du conteneur div pauses. Cela est corrigé avec overflow: hidden. Cette correction fonctionne pour les navigateurs modernes. Si vous voulez résoudre ce problème pour IE6, vous trouverez ci-dessous une solution approximative: http://notes.susam.in/2011/06/float-containment.html

Source

2011-07-27 09:06:16

Votre site de référence utilise simplement une image d'arrière-plan centrée répétée verticalement et composée des deux couleurs.

Dans ce cas, l'image est large de 3300px et j'ai donc dû étirer mon navigateur sur les deux moniteurs pour voir son défaut. Si vous êtes d'accord pour supposer que la plupart des gens n'essayeront pas de l'étirer au-delà de la largeur de votre image (techniquement, vous pourriez le faire aussi grand que vous voulez), alors cela pourrait être la façon la plus simple de le faire.

Le correspondant du css site de référence est

html,body { 
    background-image:url('images/background.gif'); 
    background-repeat: repeat-y; 
    background-position: center; 
    background-attachment: fixed; 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
}

Le reste du site serait tout simplement assis dans l'emballage normal.

Source

2011-07-27 09:08:51 Septih

Si tout ce dont il a besoin est l'arrière-plan puis +1 pour une solution efficace très simple! – BonyT

..Je ne peux pas croire à quel point cela a fonctionné. J'ai vraiment négligé les choses simples .. Merci! – Brett

2 divs de différentes tailles centrées

Répondre

Questions connexes