aligner deux divRésolu/Fermé

Question

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. 

Configuration: Windows 7 / Firefox 8.0

ideal23 · Accepted Answer

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

ideal23 · Answer

essai avec float

ideal23 · Answer

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

twiiiix · Answer

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

ideal23 · Answer

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.

twiiiix · Answer

Je crois que tu n'as pas compris que c'est un design extensible... (ou c'est moi qui m'exprime mal ^^)

Dinath · Answer

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

Aligner deux div

7 réponses

Discussions similaires

Newsletters