Aligner deux div [Résolu/Fermé]

Signaler
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
 -
Messages postés
1595
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur sécurité
Dernière intervention
28 juin 2020
 -
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

Réponse 1 / 7
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
 28
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;

}
Merci
3
Merci

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

CCM 60727 internautes nous ont dit merci ce mois-ci

Réponse 2 / 7
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
 28
essai avec float
Signaler
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
 38
avec float, mon div se colle a gauche et ne prend pas toute la place disponible comme je le voudrais.
Signaler

//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>
Réponse 3 / 7
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
 28
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;

}
Réponse 4 / 7
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
 38
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...
Réponse 5 / 7
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 septembre 2014
 28
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.
Réponse 6 / 7
Messages postés
325
Date d'inscription
jeudi 14 janvier 2010
Statut
Membre
Dernière intervention
25 janvier 2014
 38
Je crois que tu n'as pas compris que c'est un design extensible... (ou c'est moi qui m'exprime mal ^^)
Réponse 7 / 7
Messages postés
1595
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur sécurité
Dernière intervention
28 juin 2020
 190
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 ;-)
Posez votre question