2 div se touche css

tomg -  
 tomg -
Bonjour,
je voudrais que left et right touche content simplement.
Quelqu'un Peut M'aider SVP?

mon html:
<div id="banner"><font size=5><u><center><b><TITRE></b></center></u></font></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"><center><font color=#000000><TEXTE><SUITE><br><br><COMMENT><IMPRIMER><ENVOYER></font></center></body></div>
</div>
<div id="footer"><font color=#FFFFFF><center><b>News ajoutée le <DATE></b></center></div>

mon css:
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:765px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;background-repeat:repeat;background-image:url(planete.jpg);}
#content{width:625px;float:center;background-color:#ffffff;}
#footer{width:765px;clear:left;background-repeat:repeat;background-image:url(planete.jpg);} #right{width:69px;float:right;background-repeat:repeat;background-image:url(planete.jpg);}
#container {overflow:hidden; zoom:1;}
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px;}
</style>
A voir également:

7 réponses

Utilisateur anonyme
 
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:765px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;display:block;background-repeat:repeat;background-color:#FF0000;}
#content{width:625px;background-color:#ffffff;text-align:center;color:#000;margin:0 0 0 69px;}
#footer{width:765px;clear:both;background-repeat:repeat;background-image:url(planete.jpg);}
#right{width:69px;display:block;float:right;background-repeat:repeat;background-color:#0000FF;}­
#container {overflow:hidden; zoom:1;}
#left, #right, #content {}
#level0{
width:763px;/* 69+625+69*/
margin:0px auto;
}
</style>
<html>
<body style='background-color:#000;'>
<div id="banner">TITRE</div>
<div id="level0">

<div id="container">
<div id="right">right</div>
<div id="left">left</div>
<div id="content">Comment</div>
</div>

</div>
<div id="footer">News ajoutée le </div>
</body>
</html>
0
yveskouam
 
essaie de mettre un margin à gauche et à droite de content. FF et IE ne reagissent pas pareil avec donc si necessaire tu mets un margin negatif pour IE(margin: -3px)
#content{width:625px; margin:0; float:center;background-color:#ffffff;}
0
tomg
 
euh ouai, j'y arrive pas, jcomprend pas tellement là ce que jdois faire, j'ai essayer quelques trucs mais.....
0
tomg
 
j'ai essayer de faire:

#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px; [b]width=765px;[/b]}

mais là je ne vois plus left et right.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
tomg
 
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px; width=765px;}
0
macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention   89
 
Bonjour.

Tu as essayé en fixant la position de right ?
/* 694px=69+625 */
#right {width:69px;position:absolute;left:694px;margin:0;padding:0;}
0
tomg > macgawel Messages postés 664 Date d'inscription   Statut Membre Dernière intervention  
 
screenshot avec ce que j'ai:

<img src=http://images1.hiboox.com/images/2608/98aff211c62e521bdbe31ad856f63eda.jpg>

scrennshot avec le code de macgawel:

<img src=http://images1.hiboox.com/images/2608/c804959241efabc6554d575f4dd6b309.jpg>

donc ça ne le fé pas tro...
0
tomg
 
http://images1.hiboox.com/images/2608/98aff211c62e521bdbe31ad856f63eda.jpg

http://images1.hiboox.com/images/2608/c804959241efabc6554d575f4dd6b309.jpg
0
tomg
 
j'ai trouver la solution !!!

css:
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:763px;height:25px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;background-repeat:repeat;background-image:url(planete.jpg);}
#content{width:625px;float:center;background-color:#ffffff;}
#footer{width:763px;clear:left;background-repeat:repeat;background-image:url(planete.jpg);}
#right{width:69px;float:right;background-repeat:repeat;background-image:url(planete.jpg);}
#container {overflow:hidden; zoom:1; width:763px;}
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px;}
</style>

html:
<div id="banner"><font size=5><u><center><b><TITRE></b></center></u></font></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"><center><font color=#000000><TEXTE><SUITE><br><COMMENT><IMPRIMER><ENVOYER></font></center></body></div>
</div>
<div id="footer"><center><font color=#FFFFFF><b>News ajoutée le <DATE></b></center></div>

Et L'avantage c'est que ça fonctionne correctement sur IE....
Merci a vous !!
0