Div l'un a coté

Résolu

peter -
cedric - 31 mai 2007 à 19:35

Bonsoir , j'aimerais savoir comment faire pour mettre 2 div l'un a coté de l'autre svp , car ils se mettent par défaut l'un en dessous de l'autre , merci .

Afficher la suite

A voir également:

Div l'un a coté
Point vert a cote de la batterie - Accueil - Protection
Configuration cote à cote incorrecte chrome ✓ - Forum Google Chrome
Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Graphisme
Comment mettre des images côte à côte? - Forum LibreOffice / OpenOffice
Div c++ - Télécharger - Langages

16 réponses

Réponse 1 / 16

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Il faut absolument que tu lises attentivement les choses qu'on te propose.
Elles contiennent des infos qui te sont utiles.

Par exemple, l'exemple donné en <1> ne réponds pas seulement à ta question initiale. Il mets les différents élément dans un contexte. Il montre comment placer des blocs côte-à-côte avec “float” puis comment revenir à un flux normal après des “float”.
Adapté à ton cas, le #menu est en float:left; et le .windows1 aussi.
C'est le float qui permet de les placer les uns à côté des autres.
Ici, le “position : relative;” n'est pas vraiment important.
http://cjoint.com/data/fEre3JwIXM.htm

Il serait aussi plus logique que tu fasses :

<div id="menu">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

que tu mettes l'<ul> dans une <div> à laquelle tu appliqueras le float.

De plus, quelle est l'utilité d'avoir une “class windows1” ? Tu comptes l'utiliser plusieurs fois ?

Réponse 2 / 16

gryzzly Messages postés 4608 Date d'inscription Statut Contributeur Dernière intervention 1 335

Grace à la propriété float et la position relative.

exemple ici : http://pompage.net/IMG/html/page_modele10.html

Réponse 3 / 16

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Si tu regardes bien les exemples que nous t'avons proposés, tu remarqueras que le mélange “position: absolute;” et “float: …;” n'a pas été utilisé.
C'est soit l'un, soit l'autre.

Et que des dimensions ont été systématiquement appliquées :

    position: relative; 
    width: 25%;

    position: absolute; 
    width: 230px:

Pour ma part, en général, j'ai un faible pour le “float”.

+ Pour que le “absolute” fonctionne sans trop de surprises, il est nécessaire de préciser une “position: relative;” au bloc qui le contient. Sinon, c'est le 1er bloc avec cette précision qui est pris en compte.

Réponse 4 / 16

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

J'utilise le plutôt dans les pour aller à la ligne.
Et si tous tes ont la même mise en forme, tu risques de te limiter.

Le que tu cites possède un “clear : left;”. On suppose donc qu'il sert à “annuler” les “float : left;” précédents.
Tous tes suivront des float ?
Non. Alors définis un style particulier pour ce particulier.

Ou alors précise les

    #saut {
      line-height : 52px;
      }

    <br id="saut">

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

Posez votre question

Réponse 5 / 16

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

De manière plus rigide, on peut aussi le faire en “position : absolute” :
http://pompage.net/IMG/html/page_modele09.html

Tu peux aussi les transformer en “display:inline;”
Mais, bof…

+ http://edu.ca.edu/selfhtml/navigation/css.htm#positionnement

Réponse 6 / 16

cedric

ca ne marche pas , voici mon code html et css :

<ul id="menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

<div class="windows1">
</div>

<p>...</p>

#menu {
border: 1px solid black;
width: 150px;
padding: 0px;
position: relative; 
float: left;
}

.windows1 {
width: 400px;
height: 123px;
border: 1px solid black;
position: absolute;
float: left;
margin-left: 5px;
}

les paragraphes sont en plein dans mon div windows1...

Réponse 7 / 16

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

peter, cedric sont la même personne ?

Réponse 8 / 16

cedric

oui dsl c'est moi cedric me suis planté de pseudo .

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

“me suis planté de pseudo”
Inscris-toi.
Ça t'évitera ça.
Et ça ne fait pas mal.
Et même, c'est gratuit.
(-;

Réponse 9 / 16

cedric

quelqu'un aurait il une idée svp ?

merci

Réponse 10 / 16

cedric

ma foie je ne vois vraiment pas , a la base j'ai ca :

<ul id="menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

<div class="windows1">
</div>

<p>...</p>

quand je mets le menu en float left ou en position relative ou les 2 , il se retrouve en plein dans les et je cherche a mettre le div windows1 a coté du div menu mais jvois pas du tt comment faire j'ai essayé comme dans vos exemples et ca marche pas . voici le code css du menu :

#menu {
border: 1px solid black;
width: 150px;
padding: 0px;
}

Réponse 11 / 16

cedric

j'ai reussi a faire ce que je voulais jte remercie , par contre 1 autre petit soucis apparait :

j'ai mis un br sous les 2 div , mais ca passe pas de ligne par rapport aux paragraphes :

<div id="menu">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>

<div id="windows1"></div>

<br>

<p>...</p>

#menu {
border: 1px solid black;
width: 151px;
height: 164px
background: url("menu.gif");
padding: 0px;
float: left;
}

#menu li a {
margin-bottom: 1px ;
height: 41px;
display: block;
}

#windows1 {
float: left;
width: 439px;
height: 164px;
border: 1px solid black;
margin-left: 5px;
}

p {border:1px #000000; background:#ffffff; text-align:center; color:#000000; font-family: Tahoma; font-size:13px; clear: left;}

Réponse 12 / 16

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Remplace par :

  <p>&nbsp;</p>

Et propose une solution de remplacement aux systèmes qui n'ont pas Tahoma :

  font-family: Tahoma, sans-serif;

Réponse 13 / 16

cedric

sur le fond ca marche mais dans mon cas ca ne fait pas d'espace , ca me fait un paragraphe sur fond de couleu bleu , car tous mes paragraphes sont en fond de couleur bleu , ya donc pas moyen de passer une ligne ? :)

Réponse 14 / 16

cedric

j'ai essayé avec ta seconde solution et ca ne change rien de particulier , c'est quand meme fou que pour passer une simple ligne je dois faire un truc sophistiqué alors qu'avant avec br ca marchait tt seul !!!

je sais plus quoi faire , mes 2 div que j'ai réussi a faire sont collés par le bas à mes paragraphes suivants :-/

Réponse 15 / 16

tonnick

Et jouer avec les margin plutot que de faire des sauts de ligne ?
#menu {
border: 1px solid black;
width: 151px;
height: 164px;
margin: 0 0 20px ;
background: url("menu.gif");
padding: 0px;
float: left;
}

Réponse 16 / 16

cedric

nikel ca marche , un grand merci a gihef pour toute son aide precieuse et a toi aussi pour cette reponse utile .

Discussions similaires

comment ecrire un double cote " "

Aligner 2 photos côte à côte...

Le son ne sort que d'un côté de mon casque, pourquoi ?

A quoi correspond cette croix sur snapchat

Son du casque d'un seul coté ?

Votre réponse

Discussions similaires