Comment faire deux <div> relative l'une à côté de l'autre?

Comment faire deux <div> relative l'une à côté de l'autre? - HTML/CSS - Programmation

Marsh Posté le 27-01-2008 à 03:21:03    

Bonsoir,
je suis à la recherche de quelqu'un qui pourrait m'aider pour un problème en html à propos des div. Je sais c'est long à lire mais c'est parce-que j'ai essayer d'être vraiment le plus clair possible.
_________________________________
Mon problème:  
******************************
Tout d'abord j'ai un <div class="header"> qui lui à une hauteur fixe et qui prend toute la largeur, ensuite j'ai mon <div class="contenu"> qui lui à une image de fond qui se répète en fonction de sa hauteur qui est relative et qui prend toute la largeur (c'est à dire la même largeur que le header). Et pour finir un <div class="footer"> qui reste en dessous du contenu, largeur et hauteur fixe.
 
Là où ça se complique c'est que à l'intérieur de mon div contenu il y à deux parties: les articles, et le menu sur la droite. Pour que vous vous rendiez mieux compte, le mieux c'est que je vous montre ce que j'ai réussi à faire de mieux en m'acharnant pendant plus de 4h de temps la dessus: http://img254.imageshack.us/img254 [...] o01qz6.gif
 
Donc vous aurez vu que la div du menu dépasse alors que ce que je voudrais, c'est qu'elle pousse la div contenu (pour l'arrière-plan), de façon à aussi pousser le footer en fonction. Bon pour parvenir au résultat actuel (celui de l'image) j'ai mis mon <div class="menu"> en float right donc je sais que ça ne peut pas pousser la div parente en fonction de la hauteur. Par contre si je la met en position relative elle pousse bien tout le contenu ainsi que le footer sauf que mes paragraphe de la partie gauche ne se mette plus à la même hauteur que le menu. Les deux div se mette l'une en dessous de l'autre au lieu de se mettre l'une à côté de l'autre.
 
Pour résumé ce que j'aimerai c'est que la div menu ainsi que mes paragraphes soit juste après mon header à la même hauteur et que peut importe lequel des deux div à la plus grande hauteur, l'arrière-plan du contenu suit en conscéquence sur toute la largeur et le footer se positionne tout en bas.
 
Sur ce j'espère avoir été le plus clair possible et merci d'avance si vous poster une réponse. Voilà à bientôt !
 
Et je vous passe un extrait de mon css ainsi que de ma page html :  
 
html

Code :
  1. <div class="fond">
  2.     <div class="header">
  3. </div>
  4. <div class="contenu">
  5.   <div class="menu">
  6.     <img src="images/fleche_petit_texte.png" /><br />
  7.  <img src="images/fleche_petit_texte.png" /><br />
  8.  <img src="images/fleche_petit_texte.png" /><br />
  9.  <img src="images/fleche_petit_texte.png" /><br />
  10.  <img src="images/fleche_petit_texte.png" /><br />
  11.  <img src="images/fleche_petit_texte.png" /><br />
  12.  <img src="images/fleche_petit_texte.png" /><br />
  13.  <img src="images/fleche_petit_texte.png" /><br />
  14.  <img src="images/fleche_petit_texte.png" /><br />
  15.   </div>
  16.   <p class="articles">
  17.   Plus que la défaite en soi, c'est la manière qui inquiète. Roger Federer est en effet passé à côté de son match,
  18.   même s'il s'est révolté dans la troisième manche. Dominé dans la diagonale des coups droits, peu efficace au service
  19.   (72 % de points gagnés derrière sa première balle), il semblait qui plus est extrêmement lent dans son petit peu de
  20.   jambes pendant plus de 90'.<br />
  21.   Tout semblait pourtant bien parti pour l'homme aux douze titres du Grand Chelem, qui menait logiquement 5-3 0/30 sur
  22.   le service adverse dans la première manche. Il ne parvenait cependant pas à conclure sur son engagement, comme cela
  23.   avait déjà été le cas dans le premier set de son 3e tour face à Janko Tipsarevic (ATP 49). Il commettait trois fautes
  24.   de coup droit dans ce dixième jeu crucial.
  25.   </p>
  26.   <br /><br />
  27.   <p class="articles">
  28.   Plus que la défaite en soi, c'est la manière qui inquiète. Roger Federer est en effet passé à côté de son match,
  29.   même s'il s'est révolté dans la troisième manche. Dominé dans la diagonale des coups droits, peu efficace au service
  30.   (72 % de points gagnés derrière sa première balle), il semblait qui plus est extrêmement lent dans son petit peu de
  31.   jambes pendant plus de 90'.<br />
  32.   Tout semblait pourtant bien parti pour l'homme aux douze titres du Grand Chelem, qui menait logiquement 5-3 0/30 sur
  33.   le service adverse dans la première manche. Il ne parvenait cependant pas à conclure sur son engagement, comme cela
  34.   avait déjà été le cas dans le premier set de son 3e tour face à Janko Tipsarevic (ATP 49). Il commettait trois fautes
  35.   de coup droit dans ce dixième jeu crucial.
  36.   </p>
  37. </div>
  38. <div class="footer">
  39. </div>
  40.   </div>


 
css

Code :
  1. .header  {
  2.   border:solid 0px;
  3.   width:875px;
  4.   height:94px;
  5.   position:relative;
  6.   left:64px;
  7.   top:155px;
  8.   background-image: url("images/header.png" );
  9. }
  10. .contenu {
  11.   border:solid 0px;
  12.     z-index: 1;
  13.   width:875px;
  14.   position:relative;
  15.   top:155px;
  16.   left:64px;
  17.   background-repeat:repeat-y;
  18.   background-image: url("images/contenu.png" );
  19. }
  20. .footer  {
  21.   position:relative;
  22.   width:875px;
  23.   height:205px;
  24.   top:155px;
  25.   left:64px;
  26.   background-image: url("images/footer.png" );
  27. }
  28. .menu {
  29.   float: right;
  30.   border:solid 1px;
  31.   width: 250px;
  32. }
  33. .articles {
  34.   position: relative;
  35.   border:solid 1px;
  36.   width: 550px;
  37.   border:solid 1px;
  38.   width: 550px;
  39.   margin: 0px;
  40.   left: 20px;
  41. }


---------------
_____________________________
Reply

Marsh Posté le 27-01-2008 à 03:21:03   

Reply

Marsh Posté le 27-01-2008 à 14:37:16    

Un peu la flemme de debugger ton code mais je pense qu'il doit s'agir d'un clear manquant pour 'pousser' ton pied de page.
 
un exemple ici : http://afbilou.free.fr/tmp/gabarit_03.html qui selon moi est proche de ce que tu souhaites mettre en place.

Reply

Marsh Posté le 27-01-2008 à 18:06:13    

mais lol  :lol:  tellement parfait l'exemple que tu ma donné. C'est exactement ça que je veux, merci beaucoup! Je vais m'en inspirer et essayer de l'adapter pour mon code. merci a+
 
 [:masekelah]
 
edit: voilà j'ai essayer mai le problème c'est que le menu et le div article ont le même arrière plan qui est en fond du div contenu (celui qui prend toute la largeur) et voilà ce que j'obtiens : http://img107.imageshack.us/img107 [...] re1aw8.gif  
donc la div article et la div menu pousse bien le footer, mai moi ce que je veux en fait c'est que ces deux div pousse la div contenu, et c'est cette div qui s'occupe de pousser le footer.
 
voilà... donc en fait je tourne en rond   :pt1cable:
 
edit 2 : Je me dit que peut-être je devrais me tourner vers un petit script en javascript ou php je sais pas. si quelqu'un à quelque chose je suis preneur ...


Message édité par bartsword le 27-01-2008 à 18:37:05

---------------
_____________________________
Reply

Sujets relatifs:

Leave a Replay

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