Aligner deux div

Résolu

twiiiix Messages postés 325 Date d'inscription Statut Membre Dernière intervention -
Dinath Messages postés 1602 Date d'inscription Statut Contributeur sécurité Dernière intervention - 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.

A voir également:

Div alignement
Div c++ - Télécharger - Langages
Remplacer #div/0 par vide ✓ - Forum Excel
Alignement tête d'impression canon pixma mg3650 - Forum Imprimante
Alignement manuel de la tête d'impression d'une canon 3650s. - Forum Imprimante
Alignement grid - Forum Windows 10

7 réponses

Réponse 1 / 7

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 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;

}

Réponse 2 / 7

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

essai avec float

twiiiix Messages postés 325 Date d'inscription Statut Membre Dernière intervention 57

avec float, mon div se colle a gauche et ne prend pas toute la place disponible comme je le voudrais.

thong

//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 7 / 7

Dinath Messages postés 1602 Date d'inscription Statut Contributeur sécurité Dernière intervention 218

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 ;-)

Discussions similaires

2 <div> sur la même ligne ?

MOYENNE excel sans #DIV

Ecrire dans un div avec une fction javascript

html Afficher/cacher une DIV sur clique <a>

changer une div sans recharger toute la page

Remplacer #div0 par le chiffre 0

Votre réponse

Discussions similaires