Aligner deux div [Résolu/Fermé]

Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
- - Dernière réponse : Dinath
Messages postés
1554
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur sécurité
Dernière intervention
27 janvier 2019
- 30 juin 2014 à 13:09
Bonjour,
Je réalise le design d'un site web et je n'arrive pas à aligner correctement deux div (enfin si mais pas comme je le veux), je m'explique :
J'ai un div "conteneur" qui représente mon header sur le site, il prend 100% de la largeur.
J'ai un div "logo" dans le header, contenant une image.
J'ai un autre div "menu" dans le header, avec une largeur définie en pixel.

#conteneur {
   width:100%;
   height: 144px ;
   text-align: center;
}
#logo {
   display: inline-block ;
   height:144px ;
}
#menu {
    display: inline-block;
    float: right;
    height: 94px;
    padding-top: 50px;
    width: 430px;
}


Je voudrais que le div "menu" soit à droite à la même hauteur que le div "logo" et que le div "logo" prenne toute la place disponible.

J'ai essayer avec un display: inline-block sur le div "logo", mais il ne prend pas toute la place disponible.

J'ai pensé à faire un tableau de deux colonnes, mais j'ai lu que ce n'était pas très propre...

Merci d'avance.

Afficher la suite 

7 réponses

Meilleure réponse
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
28
3
Merci
changer les dimensions en extensible
#conteneur {
width:100%;
height: 144px ;
text-align: center;
}
#logo {
width: 30%;
float: left;
height:144px;

}
#menu {
margin-left: 30%;
height: 94px;
padding-top: 50px;

}

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63177 internautes nous ont dit merci ce mois-ci

Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
28
0
Merci
essai avec float
twiiiix
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
28 -
avec float, mon div se colle a gauche et ne prend pas toute la place disponible comme je le voudrais.
//ne prend pas toute la place disponible
Utilisez des valeurs en pourcentage pour cela, il faut que la somme des 2 div sur une ligne soit égale à 100% moins la taille des bordures.

<p style="width:100%;"> 
<div style="float:left;width:40%;"> 

</div> 
<div style="float:right;width:59%;"> 


</div> 

</p>
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
28
0
Merci
je connais pas toutes les dimensions
#conteneur {
width:624px;
height: 144px ;
text-align: center;
}
#logo {
width: 200px;
float: left;
height:144px;

}
#menu {
margin-left: 200px;
height: 94px;
padding-top: 50px;
width: 430px;

}
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
28
0
Merci
Je crois que tu n'as pas compris :D
En gros, je voudrais que le div "logo" fasse 100% - 430px.
mais sans faire de tableau, je vois pas comment...
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
28
0
Merci
les tableaux c'est dépassés. c'est bien ce que je t'ai envoyé. le logo à gauche et le menu à droite dans la div container. change les dimensions. sinon envoi tout ton code.
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
28
0
Merci
Je crois que tu n'as pas compris que c'est un design extensible... (ou c'est moi qui m'exprime mal ^^)
Messages postés
1554
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur sécurité
Dernière intervention
27 janvier 2019
144
0
Merci
Salut,

Ca fait clairement un moment mais vu que je suis tombé sur ce sujet, je vais y répondre.

Je vous déconseille l'utilisation de la ligne de flotaison (float), ça ne fera que tout casser / mal aligner suivant la taille des écrans.

https://dev.dinath.net/network_tools/

Ici on peut voir la classe box, boxes :

.box {
    margin: 1%;
    width: 18%;
    display: inline-block;
    vertical-align: top;
}

.boxes {
    margin: 2%;
}


Ma classe "boxes" englobent toutes mes "box".

En utilisant ceci :

    display: inline-block;
    vertical-align: top;


Je permet à mes deux div de rester côte à côte, les div se placent les unes en dessous des autres en temps normal, ici, si la place le permet, elles se metront les unes à côté des autres.

Dans l'exemple, toutes les boxes sont côte à côte, j'ai utilisé des span, cependant ça ne changent strictement rien. D'un point de vu sémantique je n'avais même pas à le faire.

Bon courage à tous ;-)