Positionner 2 DIV côte à côte et alignés vers le bas

Positionner 2 DIV côte à côte et alignés vers le bas - HTML/CSS - Programmation

Marsh Posté le 24-01-2008 à 03:49:02    

Un peu d'aide s'il vous plaît.

Code :
  1. <html>
  2. <head>
  3. <style>
  4. #all{
  5. width: 250px;
  6. border-width: 6px;
  7. border-style: dotted;
  8. border-color: blue;
  9. }
  10. #all div{
  11. display:inline;
  12. width: 95px;
  13. margin: 12px;
  14. background-image: url('http://img175.imageshack.us/img175/6633/incb7.gif');
  15. background-repeat: no-repeat;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="all">
  21. <div style="background-position:4px 98px"><img src="http://img244.imageshack.us/img244/2290/smalloutiq0.gif" alt="" /></div>
  22. <div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
  23. <div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
  24. <div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
  25. </div>
  26. </body>
  27. </html>

J'essai de mettre 2 div côte à côte et alignés vers le bas en les mettant en inline, mais les elements en inline ne supportent pas les background-image sous FF et NN.
IE :
http://img168.imageshack.us/img168/4927/iewe3.gif
 
FF & NN :
http://img182.imageshack.us/img182/185/ffst9.gif
 
---------------------------------------

Code :
  1. <html>
  2. <head>
  3. <style>
  4. #all{
  5. width: 250px;
  6. height: 780px;
  7. border-width: 6px;
  8. border-style: dotted;
  9. border-color: blue;
  10. }
  11. #all div{
  12. float: left;
  13. display: inline; /* Pour bug IE */
  14. width: 95px;
  15. margin: 12px;
  16. background-image: url('http://img175.imageshack.us/img175/6633/incb7.gif');
  17. background-repeat: no-repeat;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="all">
  23. <div style="background-position:4px 98px"><img src="http://img244.imageshack.us/img244/2290/smalloutiq0.gif" alt="" /></div>
  24. <div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
  25. <div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
  26. <div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
  27. </div>
  28. </body>
  29. </html>

Mettre un float sur ces div pour ne pas les mettre en inline donnerait ceci et je ne vois pas comment les aligner vers le bas avec un float.
IE :
http://img186.imageshack.us/img186/1172/ie2ct1.gif
 
FF & NN :
http://img186.imageshack.us/img186/8028/ff2gt2.gif

Reply

Marsh Posté le 24-01-2008 à 03:49:02   

Reply

Marsh Posté le 24-01-2008 à 03:51:34    

En plus, il faut oublier les margin-top puisque la hauteur du petit div est variable. Yay!  :(

Reply

Sujets relatifs:

Leave a Replay

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