Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2620 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] largeur de bloc qui s'adapte au flottant à sa droite ? :o

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css] largeur de bloc qui s'adapte au flottant à sa droite ? :o

n°1928723
Profil sup​primé
Posté le 04-10-2009 à 00:11:03  answer
 

Bonjour,
c'est une question toute bête, mais j'arrive pas à faire en sorte qu'un bloc ne soit pas trop large et ne passe pas derrière un autre qui est en flottant à droite...
 
Avec le code :

Code :
  1. <div class="bloc1">
  2.     bloc1
  3.     <div class="bloc2">bloc2</div>
  4.     <div class="bloc3">bloc3</div>
  5. </div>


 
associé au css :

Code :
  1. .bloc1 {
  2.     background-color: yellow;
  3. }
  4. .bloc2 {
  5.     background-color: pink;
  6.     float: right;
  7.     width: 200px;
  8.     height: 200px;
  9. }
  10. .bloc3 {
  11.     background-color: blue;
  12.     height: 300px;
  13. }


 
Il faudrait que le bloc 3 réduise sa largeur automatiquement pour laisser la place au bloc 2 (et pas passer derrière lui jusqu'au bout de la page).
 
Vous voyez une façon de faire ça ?
 
Merci [:simchevelu]

mood
Publicité
Posté le 04-10-2009 à 00:11:03  profilanswer
 

n°1928965
pataluc
Posté le 05-10-2009 à 13:29:06  profilanswer
 

Code :
  1. margin-right: 200px;


??

n°1929095
Profil sup​primé
Posté le 05-10-2009 à 19:37:51  answer
 

pataluc a écrit :

Code :
  1. margin-right: 200px;


??

Merci mais j'me suis mal exprimé, le défi c'est que le bloc réduise sa largeur uniquement si le flottant est présent à sa droite... J'ai vu que c'était le comportement par défaut sur IE8 d'ailleurs.


Message édité par Profil supprimé le 05-10-2009 à 19:38:01
n°1929108
phosphorel​oaded
Posté le 05-10-2009 à 20:19:33  profilanswer
 

Les flottants sans largeur, spa évident ...

 

À ma connaissance, impossible à réaliser avec IE 6 et tes contraintes mais tant pis pour cette merde si tu veux réaliser quelque chose de simple avec display: table-cell;

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.     <title>1 ou 2 colonnes</title>
  6.     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  7.     <style type="text/css" media="screen">
  8. .bloc1 {
  9.     background-color: yellow;
  10.     width: 400px; /* évite d'avoir du texte de 15 km pour ce test */
  11. }
  12.  
  13. .bloc1 + .bloc1 { /* on style le second .bloc1 et on le sépare visuellement du premier */
  14.     margin-top: 20px;
  15.     border: 1px solid red;
  16. }
  17.  
  18. .bloc1 div {
  19.     display: table-cell; /* le truc important. Incompatible IE6, OK pour IE7, FF3, Saf4, Op9 */
  20. }
  21.  
  22. .bloc2 {
  23.     background-color: pink;
  24.     float: right;
  25.     width: 300px;
  26.     height: 200px; /* pourquoi ce height ? */
  27. }
  28. .bloc3 {
  29.     background-color: blue;
  30.     min-height: 300px; /* juste pour l'exemple */
  31.     color: white; /* un peu moins illisible */
  32.  
  33. }
  34.  
  35.  
  36.     </style>
  37. </head>
  38. <body>
  39.  
  40. <div class="bloc1">
  41.     <div class="bloc2">
  42.         bloc2 lorem ipsum dolor sit amet
  43.     </div>
  44.     <div class="bloc3">
  45.         bloc3 qui cohabite avec un bloc flottant à droite<br />lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  46. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi.
  47. Praesent ac risus at nulla fermentum condimentum. Integer odio massa,
  48. vulputate id, suscipit non, mattis sed, nibh. Suspendisse sollicitudin egestas
  49. nunc. Proin non risus.
  50.     </div>
  51. </div>
  52.  
  53. <div class="bloc1">
  54.     <div class="bloc3">
  55.         bloc3BIS : garanti sans bloc2<br /> lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  56. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi.
  57. Praesent ac risus at nulla fermentum condimentum. Integer odio massa,
  58. vulputate id, suscipit non, mattis sed, nibh. Suspendisse sollicitudin
  59. egestas nunc. Proin non risus.
  60.     </div>
  61. </div>
  62.  
  63. </body>
  64. </html>


Message édité par phosphoreloaded le 05-10-2009 à 20:22:49
n°1929545
Profil sup​primé
Posté le 06-10-2009 à 22:30:54  answer
 

Ah merci pour la réponse (et le super exemple :)), mais c'est pas encore tout à fait ça :x
 
Là tous les blocs à l'intérieur du conteneur général prennent la même largeur que celui qui est rétréci par le flottant. Ce qu'il me faudrait c'est que tous les blocs contenus dans le div principal s'adaptent indépendamment des autres : si je rencontre un flottant je passe pas derrière, si j'en ai pas je vais jusqu'au bout du div principal.
 
Enfin j'pense que c'est impossible avec juste du css, donc tant pis merci quand même [:dawa]

n°1929630
gatsu35
Blablaté par Harko
Posté le 07-10-2009 à 10:02:25  profilanswer
 

la solution la plus simple est d'utiliser le contexte de formatage.
Ton but c'est un layout 3 colonnes où la colonne centrale s'adapte à la largeur.
 

Code :
  1. <div id="container">
  2. <div id="colLeft">gauche</div>
  3. <div id="colRight">droite</div>
  4. <div id="center">gauche</div>
  5. </div>
  6. #container, #center {overflow:hidden; zoom:1; _overflow:visible}
  7. #center {background:red;}
  8. #colLeft {float:left; width:200px;background:blue;}
  9. #colRight {float:right; width:200px;background:green;}


---------------
Blablaté par Harko
n°1990665
gaboul49_2
Posté le 06-05-2010 à 08:36:07  profilanswer
 

Pour profiter du centrage horizontal mieux vaut utiliser display : inline-block; que float : left;

n°1991097
gatsu35
Blablaté par Harko
Posté le 07-05-2010 à 08:42:43  profilanswer
 

gaboul49_2 a écrit :

Pour profiter du centrage horizontal mieux vaut utiliser display : inline-block; que float : left;


tu parleras de ça à IE6
et deuxio ta solution est gueuse et foireuse car tu oublies qu'un élement inline est forcément espacé par un espace s'il y en a dans le code HTML
Donc cette solution n'est pas iso
et super le déterrage !!


---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css] largeur de bloc qui s'adapte au flottant à sa droite ? :o

 

Sujets relatifs
Aide alignement des bloc div#...Image défilante en JavaScript + PHP avec largeur et hauteur dynamique
Problème de texte décalé verticalement dans la <div> de droiteRécupérer largeur et hauteur d'une image (movieclip)
Algorithme tableau v.négatifs à gauche et positifs à droiteAllouer de gros blocs avec malloc
Fixer la largeur maximale des lignes d'une page HTMLLargeur de colonne tableau - css
Bloc de ligne indissociableProblème alignement bloc CSS [terminé]
Plus de sujets relatifs à : [css] largeur de bloc qui s'adapte au flottant à sa droite ? :o


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR