CSS: Deux colonnes de fluide à 50% ne respectant pas la largeur min

J'essaie d'utiliser la disposition this avec deux colonnes de 50% à la place. Mais il semble que lorsque les colonnes droites atteignent leur «largeur minimale», elles passent sous la colonne de gauche. Est-il possible d'utiliser la technique 'shim' pour définir un min-width à l'encapsuleur afin que les deux colonnes cessent de redimensionner. Ainsi, en éliminant le problème de la colonne de droite se retrouvant sous la colonne de gauche.CSS: Deux colonnes de fluide à 50% ne respectant pas la largeur min

Ma page est la suivante.

<style type="text/css"> 

#left { 
    float: left; 
    width: 50%; 
} 

.minwidth { 
    width: 500px; 
    height: 0; 
    line-height: 0; 
} 

</style> 

<div id="wrapper"> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
    </div> 
    <div class="minwidth">&nbsp;</div> 
</div>

Le problème avec c'est la colonne de gauche arrête le redimensionnement, mais la colonne de droite sera inférieure à la colonne de gauche et de garder le redimensionnement. Fondamentalement, l'effet que je veux est une fois que la largeur des wrappers va en dessous, que les colonnes à gauche et à droite arrêtent aussi le redimensionnement. Mettre la cale dans les deux colonnes gauche et droite ne fonctionnait pas non plus.

Existe-t-il un autre moyen d'obtenir des colonnes de 50% de largeur et d'utiliser une cale pour définir correctement une largeur minimale?

Merci. Editer: L'espace dans la classe minwidth est en réalité & nbsp mais il a été converti. ;)

Source

2008-10-10 Mike

se fait-il dans tous les navigateurs? J'ai une mise en page de portail qui est obnubilée par IE parce qu'elle ignore minwidth. –

J'ai essayé de changer votre à & nbsp; mais l'analyseur n'a pas aimé ça. Cela ressemble à un bug dans StackOverflow. – Neall

Ed.T: Seulement dans IE je crois. – Mike

j'ai pu trouver un "pas de tables HTML nécessaires" solution basée sur une technique par Stu Nicholls à CSS Play et je l'aime personnellement car non seulement cela fonctionne dans IE6 + et FF2 +, c'est aussi CSS valide qui ne nécessite aucun hacks. Pour mon argument sur pourquoi une mise en page CSS est préférable aux tableaux HTML, voir ci-dessous. D'abord, je recommande que lors de la conception de nouvelles pages avec CSS, vous le faites avec conforme aux normes mode navigateur. Pour une explication du mode quirksmode et des normes, consultez this article depuis l'un de mes sites de ressources CSS préférés. Tout ce que vous avez à faire est d'ajouter un élément DOCTYPE spécifique en haut de vos pages. Le CSS sera alors forcé de rendre en mode conforme aux normes, résultant en moins de bogues et d'idiosyncrasies de navigateur. Dans le cas où vous ne pouvez pas passer en mode conforme aux normes, il existe une solution de largeur minimale pour les navigateurs dans quirksmode, également disponible sur CSS Play. Deuxièmement, vous devez ajouter un wrapper supplémentaire autour de votre balisage existant. Cette enveloppe est utilisée pour définir la largeur minimale pour les navigateurs qui comprennent min-width (pas IE). Vous pouvez ensuite utiliser l'astuce * html pour cibler spécifiquement IE 6 et appliquer la technique de Stu Nicholl aux wrappers internes.La technique est détaillée ici et l'exemple spécifique utilisé est « # 2 Pour les normes en mode compatible IE »:

http://www.cssplay.co.uk/boxes/minwidth.html

Le résultat final est assez simple. Il crée 2 colonnes de 50% en utilisant la technique 2-column ALA style mentionnée dans la question initiale, qui ont une largeur minimale globale (de 500px dans cet exemple) où les colonnes cessent de redimensionner et la colonne de droite ne tombe pas en dessous de la colonne de gauche. J'espère que ça aide!

Éditer: Cette même technique peut être utilisée pour appliquer une largeur minimale compatible avec tous les navigateurs. Par exemple, les colonnes n'ont pas besoin d'être à 50% chacune et n'importe quel nombre de colonnes peut être utilisé. http://www.glish.com/css/ est une excellente ressource pour les mises en page CSS et lorsqu'il est combiné avec cette technique de largeur minimale, il existe de nombreuses mises en page qui peuvent être créées avec CSS minimal et valide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 

     /* For browsers that understand min-width */ 
     .width { 
      width: 100%; 
      min-width: 500px; 
     } 

     /* IE6 Only */ 
     * html .minwidth { 
      border-left: 500px solid white; 
      position: relative; 
      float: left; 
     } 

     /* IE6 Only */ 
     * html .wrapper { 
      margin-left: -500px; 
      position: relative; 
      float: left; 
     } 

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

     .right { 
      float: left; 
     } 

    </style> 
</head> 
<body> 

<div class="width"> 
    <div class="minwidth"> 
     <div class="wrapper"> 
      <div class="left"> 
       Left 
      </div> 
      <div class="right"> 
       Right 
      </div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

Maintenant, mon incitation pour la mise en place d'un compte débordement de pile est d'être capable de répondre à la suggestion ci-dessous: « Si vous voulez deux colonnes, utilisez une table, plutôt que d'essayer de forcer la division de se comporter comme une table ". Puisque je suis trop nouveau pour commenter ou rejeter, j'augmente cette discussion.

Vraiment?

Quelqu'un pose une question sur les mises en page CSS et répond en leur disant d'utiliser des tables HTML? Permettez-moi de commencer en disant que je ne crois pas que les tableaux HTML sont complètement inutiles. En fait, chaque fois que j'ai besoin d'afficher des données tabulaires, , c'est-à-dire des données relationnelles, j'utilise un tableau HTML. Les propriétés d'affichage des tables CSS ne sont pas encore totalement supportées (bientôt sous IE8!) Et l'utilisation d'un tableau HTML à un seul niveau est une solution efficace. Regardez le balisage pour l'une des pages Web de Google et vous verrez qu'ils seraient d'accord. Comme quelqu'un qui a passé beaucoup de temps à écrire des mises en page CSS qui sont compatibles avec les navigateurs croisés alors qu'elles auraient pu le faire en 10 minutes en utilisant une table, je suis d'accord pour trouver une solution plus simple à ce problème. Cependant, juste parce que vous pouvez utiliser de la dynamite pour rénover votre cuisine, ne signifie pas que vous devriez. L'article suivant fournit une explication détaillée pour laquelle les dispositions basées sur CSS sont plus souhaitables.

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

Source

2008-10-23 15:21:12 adgoudz

Cela fonctionne très bien, mais seulement lorsque la colonne de droite contient une petite quantité de données. la colonne de droite, il enveloppe. – Mat

-4

Utilisez un tableau à 2 colonnes. Cela fera exactement ce que vous voulez. Les Div sont censés être utilisés pour simplement diviser des blocs logiquement distincts, et les tableaux sont là pour mettre en forme des données à colonnes. Si vous voulez deux colonnes, utilisez une table, plutôt que d'essayer de forcer Div à se comporter comme une table.

Source

2008-10-10 14:16:46

Les colonnes gauche et droite ne sont-elles pas des blocs distinctifs? Mon but est de l'utiliser comme une mise en page et de ne pas afficher les données tabulaires. Reviens si je me trompe complètement. ;) Merci. – Mike

Vous voulez une disposition à deux colonnes, de sorte que votre mise en page est tabulaire. Sans surprise, une table est donc votre meilleur pari pour obtenir la mise en page que vous voulez. –

Ne t'inquiète pas David je t'ai. Trop d'amour CSS-seulement-mise en page là-bas de nos jours. –

Essayez ceci pour le style:

.left, .right { width:50%; float: left; } 
.right { float: right; } 
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }

Source

2008-10-10 14:20:38

Excellent, semble bien fonctionner contrairement à d'autres suggestions. Eh bien dans Firefox au moins. Ne fonctionne pas tout à fait sur IE. – Mat

Il suffit de définir une largeur min pour l'emballage et il suffit de changer les colonnes de gauche et de droite à des pourcentages. Cela empêchera vos deux colonnes d'être poussées dans/sur/sous l'autre.

Source

2008-10-10 14:21:46

Ceci est une tentative rapide mais il fonctionne (seulement testé dans Firefox):

<head> 
<style type="text/css"> 

#left { 
    float: left; 
    width: 50%; 
} 

.minwidth { 
    min-width: 500px; 
    background:#eee; 
    height: 0; 
    overflow:visible; 
} 
.col{ 
    min-width:250px; 
    background:#eaa; 
} 

</style> 
</head> 
<body> 
<div id="wrapper" class="minwidth"> 
    <div id="left" class="col"> 
     left 
    </div> 
    <div id="right" class="col"> 
     right 
    </div> 
    <div><!-- Not needed --></div> 
</div> 
</body>

Source

2008-10-10 14:22:57 slashnick

Dans Firefox, une colonne droite plus longue saigne vers la gauche pour remplir toute la largeur. :( – Mat

Essayez ceci:

<html> 
<head> 
<title>Testing some CSS</title> 
<style type="text/css"> 

.floatme { 
    float: left; 
    width: 50%; 
} 

.minwidth { 
    width: 500px; 
    height: 0; 
    line-height: 0; 
    clear: both; 
} 

</style> 


<body> 
<div id="wrapper"> 
    <div class="floatme"> 
     left 
    </div> 
    <div id="floatme"> 
     right 
    </div> 
    <div class="minwidth"> </div> 
</div> 
</body> 
</html>

Source

2008-10-10 14:27:17 willasaywhat

Dans Firefox, une colonne plus longue se rabat vers la gauche pour remplir toute la largeur. :( – Mat

Eh bien, je ne veux pas entrer dans un argument politique, mais le raisonnement suivi dans l'article cité par Agoudzward de « pourquoi CSS est mieux que les tables » n'a rien à voir avec des tables. Ce qu'il démontre, c'est que CSS est mieux que d'utiliser des balises de polices individuelles et les paramètres de couleur et ainsi de suite encore et encore lorsque de nombreux éléments de la page appellent le même style. Oui, je suis absolument d'accord que si vous avez une centaine d'éléments sur une page qui devrait tous être en vert, 14pt, texte Arial, il est donc logique de créer un style CSS plutôt que de copier et coller un tag de police encore et encore , pour toutes les raisons qu'ils donnent. Cela va double si vous voulez ce même style sur plusieurs pages.

Mais qu'est-ce que cela a à voir avec les tables? Le raisonnement semble être "CSS est bon car il vous permet de spécifier la police et la couleur une fois plutôt que de façon répétée, donc tout ce qui peut être fait avec CSS est préférable à toute autre alternative possible". Eh bien, ça ne va pas du tout! Tout simplement parce qu'un outil est bon pour un type de problème ne signifie pas que c'est bon pour tous les problèmes possibles. Les marteaux sont parfaits pour mettre des ongles. Cela ne veut pas dire que je les utilise pour mettre des vis.Si je peux faire une mise en page plus simplement et logiquement avec des tableaux qu'avec des balises div et CSS, alors insister sur le fait que je devrais quand même utiliser CSS car "CSS is good" me laisse dire, et alors?

Source

2009-10-14 14:10:19 Jay

Voici un bon exemple de ce que vous désirez, je pense.

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Bref voici le CSS:

/* Start of Column CSS */ 
#container2 { 
    clear:left; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    background:#ffa7a7; /* column 2 background colour */ 
} 
#container1 { 
    float:left; 
    width:100%; 
    position:relative; 
    right:50%; 
    background:#fff689; /* column 1 background colour */ 
} 
#col1 { 
    float:left; 
    width:46%; 
    position:relative; 
    left:52%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:46%; 
    position:relative; 
    left:56%; 
    overflow:hidden; 
}

Voici le code html:

<div id="container2"> 
    <div id="container1"> 
     <div id="col1"> 
      <!-- Column one start --> 
      <h2>Equal height columns</h2> 
      <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p> 

      <h2>Valid XHTML strict markup</h2> 
      <p>The HTML in this layout validates as XHTML 1.0 strict.</p> 
      <!-- Column one end --> 
     </div> 
     <div id="col2"> 
      <!-- Column two start --> 
      <h3>Windows</h3> 
      <ul> 
       <li>Firefox 1.5, 2 &amp; 3</li> 
       <li>Safari</li> 
       <li>Opera 8 &amp; 9</li> 

       <li>Explorer 5.5, 6 &amp; 7</li> 
       <li>Google Chrome</li> 
       <li>Netscape 8</li> 
      </ul> 


      <!-- Column two end --> 
     </div> 
    </div> 
</div>

Source

2009-10-25 22:41:55

CSS: Deux colonnes de fluide à 50% ne respectant pas la largeur min

Répondre

Questions connexes