alignement CSS: blocage horizontal?

StackOverflow https://stackoverflow.com/questions/4184350

Question

Je travaille sur un modèle CMS et essayer de savoir si cela est possible du tout. Je ne pouvais pas trouver quoi que ce soit sur le net, peut-être que je viens d'utiliser les mauvais mots-clés.

ce modèle donné:

http://img833.imageshack.us/img833/4979/alignmentmockup.jpg

<div> #1 est un conteneur 'bannière' fixe aligné à gauche.

<div> #2 est un autre récipient avec une largeur fixe. Il est censé être centré sur l'utilisation du site entier comme mesure (échelle n ° 2), mais ne se chevauchent pas avec <div> #1 (échelle 1).

Problème : lorsque la fenêtre du navigateur est trop faible (par exemple redimensionnée, navigateur mobile), le récipient chevauchement avec le <div> #1. En fonction de leur z-index, l'un d'entre eux est au-dessus de l'autre.

Approche 1 : Les deux conteneurs sur le même z-index. <div> #2 a margin:0 auto;
mais qui ne les empêche pas de se chevaucher.

Approche 2 : Les deux position: relative; float: left; z-index: 10 Styled
et <div> #2does pas l'aligner sur les sites centrent plus.

Comme il est une fin arrière modèle resticted Je travaille, je ne peux pas ajouter des conteneurs supplémentaires que je veux. Je n'ai que l'accès à la partie du droit fichier HTML entre le <body> et le début des fonctions de sites Web. Je ne peux donc ajouter <div>s séparés (comme <div> #1) mais ne peut pas les en cascade avec le reste du site (comme <div> #2).

Toute indication pour une autre approche appréciée!

Était-ce utile?

La solution

Votre problème est que CSS n'a pas min marge que vous pouvez définir sur div2 avec la largeur de div1. Je me souviens avoir lu un article sur ce pas depuis longtemps et a trouvé une bonne solution par Ron Adair:

http://www.iamron.com/downloads/min-padding.html

L'article complet dans lequel une solution plus complexe est présenté. Ron commente ensuite son chemin plus facile d'obtenir le même résultat:

http://buildinternet.com/2009/10/purely- css-trucage-minimum-marges

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top