[css] display inline

Résolu/Fermé
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 - 27 nov. 2007 à 11:43
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 - 27 nov. 2007 à 14:39
Bonjour,

Je cherche à aligner en ligne deyx DIV qui se suivent. Seulement je dois mal m'y prendre (pas très doué en css je dois le dire) et au lieu que ces deux DIV soit alignées, elle se retrouve l'une en dessous de l'autre.
Voici mon code pour le moment :
<div style="display:block;" id="display1">
   <table border="0" bordercolor="deeppink" cellpadding="2" cellspacing="0">
       <!-- Plusieurs éléments sont affichés dans une table -->
   </table>
</div>
<div style="display:inline;" id="display2">
   <table border="0" bordercolor="deeppink" cellpadding="2" cellspacing="0">
       <!-- Plusieurs éléments sont affichés dans une table -->
   </table>
</div>


Je voulais savoir si quelqun pouvait éventuellement me montrer comme s'y prendre pour mener à bien cette mise en page ?

Merci pour votre aide.


PS: Ma page doit être compatible IE.

7 réponses

pashmina Messages postés 688 Date d'inscription mercredi 16 mai 2007 Statut Membre Dernière intervention 5 mai 2010 71
27 nov. 2007 à 12:05
tu as 2 possibilités

1. tu crée un tableau avec une ligne et deux colonnes, tu positionne tes div dans les deux cellules.

2. tu donne une position à tes div avec des CSS :
html :

<body>
<div id="texte1">texte 1</div>
<div id="texte2">texte 2</div>
</body>


CSS :

div#texte1{
width:50%;
background-color:#F3C;
float:left;

}
div#texte2{
width:50%;
background-color:#9F0;
float:left;
text-align: right;
}
3
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
27 nov. 2007 à 12:28
salut


je ne travail pas avec des table , ton code me laisse perplexe avec un

<div style="display:block;" id="display1">
pourquoi ne pas faire

<body>
<div id="content">

<div class="bloc1">celui de gauche</div>
<div class="bloc2">celui de droite</div>


</div>
</body>

et un css de  :

#content {
margin: auto;
text-align: center;
width: 900px;
}

.bloc1 {
background-color: blue;
height: 100px;
width: 400px;
float: left;
}
.bloc2 {
background-color: yellow;
height: 100px;
width: 400px;
float: left;
margin-left: 20px;
}



enfin dans le style
1
pashmina Messages postés 688 Date d'inscription mercredi 16 mai 2007 Statut Membre Dernière intervention 5 mai 2010 71
27 nov. 2007 à 11:51
t'as essayé avec float et clear?
0
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
27 nov. 2007 à 11:55
EDIT:

J'ai essay de changé avec les valeurs suivantes :

DIV 1 : DIV 2 :
block inline
block clear
clear clear
block float
float float

Mais rien ne semble fontionner :s

Je ne connais pas les valeur 'clear' et 'float', par contre j'ai tenté le 'inline-block' mais ca ne fonctionne pas plus.
0

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

Posez votre question
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
27 nov. 2007 à 12:10
Mega merci à toi pashmina, j'ai opté pour la solution 2 et ca fonctionne très très bien :)
Je vois également mieux comment on utilise float maintenant :)
0
pashmina Messages postés 688 Date d'inscription mercredi 16 mai 2007 Statut Membre Dernière intervention 5 mai 2010 71
27 nov. 2007 à 13:44
ravie d'avoir pu t'aider! ;)
0
kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
27 nov. 2007 à 13:08
Tu remarquera que ta réponse est exactement la même que celle de pashmina ;) Merci à toi aussi.
0
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
27 nov. 2007 à 14:39
re ^^
posté presque en même temps , moi le temps de regarder sur dream ce que ça donnait , mais pas vraiment les mêmes non plus :)
0