comment maintenir l'espacement entre deux div fluides?

Question

J'ai une div parente avec deux divs enfants (un flottant à gauche et un à droite) à l'intérieur du parent.

La page Web doit fonctionner sur les définitions 1024px et 1620px, elles doivent donc être fluides si elles sont agrandies en largeur. Toutes les marges semblent correctes à l'exception de l'espace vertical entre les divs gauche et droite. J'utilise jquery pour maintenir la même hauteur des deux divs. Comment puis-je garder l'espace entre les divs fixes? J'utilise des pourcentages pour les largeurs div alors que j'augmente la largeur de l'écran, l'espace entre les divs augmente donc beaucoup plus loin que les marges gauche et droite.

Le balisage:

<div class="divLoginMain"> 
<div class="divLoginLeft"> 
    <div class="divH4Title"> 
     <h4 class="h4Title">Welcome to Our Website</h4> 
    </div> 
    <table cellspacing="0" class="borderNone"> 
     <tr> 
     </tr> 
     <tr> 
     </tr> 
    </table> 
</div> 
<div class="divLoginRight"> 
     <div class="divH4Title"> 
      <h4 class="h4Title">Status - Logged In</h4> 
     </div>  
    <table cellspacing="0" class="borderNone"> 
     <tr> 
     </tr> 
     <tr> 
     </tr> 
    </table> 
</div> 
</div> 

Et le CSS:

.divLoginMain 
{ 
    margin-top:5px; 
    margin-left:.6%; 
    margin-right:.2%; 
border: solid 3px #191970; 
border-spacing: 0; 
width:97.5%; 
padding-top:7px; 
padding-bottom:7px; 
padding-left:7px; 
padding-right:7px; 
overflow:hidden; 
} 

.divLoginLeft 
{ 
    border: solid 3px #191970; 
border-spacing: 0; 
float:left; 
width:61.5%; 
padding-top:0px; 
padding-bottom:10px; 
padding-left:16px; 
padding-right:16px; 
text-align:left; 
font-family:Arial; 
color:#17238C; 
} 

.divLoginCenter 
{ 
    border:collapse; 
float:left; 
width:1px; 
} 

.divLoginRight 
{ 
    border: solid 3px #191970; 
border-spacing: 0; 
float:right; 
width:31.5%; 
padding-top:0px; 
padding-bottom:10px; 
padding-left:16px; 
padding-right:16px; 
text-align:left; 
font-family:Arial; 
color:#17238C; 
} 


Thank you, 
James 

Answer 1

Si vous utilisez déjà jQuery pour maintenir les hauteurs, pourquoi ne pas utiliser aussi pour maintenir intelligemment les largeurs?

Answer 2

Si vous voulez que l'écart reste uniforme, il suffit de fixer la largeur. vous pouvez toujours avoir une mise en page liquide avec des marges px ....

.divLoginRight { margin-left: 10px; } 

pourquoi trop compliqué?

Answer 3

Je pense que vous avez eu la mauvaise direction.

La conception des fluides est généralement utilisée pour préserver la disposition lors de la RÉDUCTION de la largeur.

Je pense que vous devriez essayer de concevoir pour la plus grande largeur (ici 1620px) et ensuite prendre en compte le fait que l'écran pourrait être réduit à 1024px.

De plus, si vous voulez que la marge ait une largeur constante, vous devrez utiliser des pixels, mais cela va être un peu plus difficile.

Enfin et surtout, vous pouvez inclure un argument min-width. Ce n'est pas fluide, mais juste si grossière, si vous redimensionnez la fenêtre pour dire 300px ...

Tirer complètement (juste les trucs de positionnement):

.divLoginMain 
{ 
margin-top:5px; 
margin-left:.6%; 
margin-right:.2%; 
width:97.5%; 
} 

.divLoginLeft 
{ 
border: solid 3px #191970; 
float: left; 
width: 100%; /* Impossible */ 
margin-right: 34%; 
} 

.divLoginRight 
{ 
border: solid 3px #191970; 
float: left; 
width: 100%; /* Impossible */ 
margin-left: 67%; 
} 

Notez que la largeur sont juste assurez-vous que les éléments occupent autant que possible.