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

largeur de bloc qui s'adapte au flottant à sa droite ? :o [css] - HTML/CSS - Programmation

Marsh Posté le 04-10-2009 à 00:11:03    

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]

Reply

Marsh Posté le 04-10-2009 à 00:11:03   

Reply

Marsh Posté le 05-10-2009 à 13:29:06    

Code :
  1. margin-right: 200px;


??

Message cité 1 fois
Reply

Marsh Posté le 05-10-2009 à 19:37:51    

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
Reply

Marsh Posté le 05-10-2009 à 20:19:33    

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
Reply

Marsh Posté le 06-10-2009 à 22:30:54    

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]

Reply

Marsh Posté le 07-10-2009 à 10:02:25    

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>
  9. #container, #center {overflow:hidden; zoom:1; _overflow:visible}
  10. #center {background:red;}
  11. #colLeft {float:left; width:200px;background:blue;}
  12. #colRight {float:right; width:200px;background:green;}


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

Marsh Posté le 06-05-2010 à 08:36:07    

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

Message cité 1 fois
Reply

Marsh Posté le 07-05-2010 à 08:42:43    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed