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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment faire deux <div> relative l'une à côté de l'autre?

bartsword

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 :

<div class="fond">
<div class="header">
</div>
<div class="contenu">
<div class="menu">
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
<img src="images/fleche_petit_texte.png" /><br />
</div>
<p class="articles">
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,
même s'il s'est révolté dans la troisième manche. Dominé dans la diagonale des coups droits, peu efficace au service
(72 % de points gagnés derrière sa première balle), il semblait qui plus est extrêmement lent dans son petit peu de
jambes pendant plus de 90'.<br />
Tout semblait pourtant bien parti pour l'homme aux douze titres du Grand Chelem, qui menait logiquement 5-3 0/30 sur
le service adverse dans la première manche. Il ne parvenait cependant pas à conclure sur son engagement, comme cela
avait déjà été le cas dans le premier set de son 3e tour face à Janko Tipsarevic (ATP 49). Il commettait trois fautes
de coup droit dans ce dixième jeu crucial.
</p>
<br /><br />
<p class="articles">
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,
même s'il s'est révolté dans la troisième manche. Dominé dans la diagonale des coups droits, peu efficace au service
(72 % de points gagnés derrière sa première balle), il semblait qui plus est extrêmement lent dans son petit peu de
jambes pendant plus de 90'.<br />
Tout semblait pourtant bien parti pour l'homme aux douze titres du Grand Chelem, qui menait logiquement 5-3 0/30 sur
le service adverse dans la première manche. Il ne parvenait cependant pas à conclure sur son engagement, comme cela
avait déjà été le cas dans le premier set de son 3e tour face à Janko Tipsarevic (ATP 49). Il commettait trois fautes
de coup droit dans ce dixième jeu crucial.
</p>
</div>
<div class="footer">
</div>
</div>

css

Code :

.header {
border:solid 0px;
width:875px;
height:94px;
position:relative;
left:64px;
top:155px;
background-image: url("images/header.png" );
}
.contenu {
border:solid 0px;
z-index: 1;
width:875px;
position:relative;
top:155px;
left:64px;
background-repeat:repeat-y;
background-image: url("images/contenu.png" );
}
.footer {
position:relative;
width:875px;
height:205px;
top:155px;
left:64px;
background-image: url("images/footer.png" );
}
.menu {
float: right;
border:solid 1px;
width: 250px;
}
.articles {
position: relative;
border:solid 1px;
width: 550px;
border:solid 1px;
width: 550px;
margin: 0px;
left: 20px;
}

---------------
_____________________________

Publicité

afbilou

pouet your life

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.

bartsword

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

---------------
_____________________________

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Positionner 2 DIV côte à côte et alignés vers le bas	Aligner un div à coté d'un champ de texte
Placer le bloc news du côté droit	[CSS] Faire une info-bulle avec internet explorer...
Positionnement d'image relative/absolu	L'importance relative du développement Web
coté page fixe, centre	[form] Comment choisir un fichier côté serveur ?
creer une application coté serveur	[.NET 2.0] Récupérer la couleur d'un control côté serveur
Plus de sujets relatifs à : Comment faire deux <div> relative l'une à côté de l'autre?

Page générée en 0.060 secondes