Hello,
Je cherche à obtenir une mise en forme qui me semble simple mais en réalité cocasse.
Voici ma structure
Dans un premier temps, je voudrais que l'input et la div#commandes soient alignés. J'applique donc un display:inline à div#commandes.
Le problème est que :
- div#commandes doit être de taille variable. Elle doit être obligatoirement collé à droite.
- j'aimerais que l'input#keywords prenne toute la largeur qu'il lui reste.
Je n'arrive pas à obtenir ça.
Si je spécifie un width: 100% à l'input#keywords, celui ci dégage la div#commandes en dehors de la boite.
J'ai pensé à faire flotter div#commandes à droite afin que l'input#keywords vienne se wrapper autour, mais sans succès
Merci pour votre aide.
Modifié par supertino (06 Aug 2012 - 14:16)
Je cherche à obtenir une mise en forme qui me semble simple mais en réalité cocasse.
Voici ma structure
<div id="conteneur">
<input type="text" id="keywords" />
<div id="commandes">
<button>Edit</button>
<button>Copy</button>
... et d'autres boutons ...
</div>
</div>
Dans un premier temps, je voudrais que l'input et la div#commandes soient alignés. J'applique donc un display:inline à div#commandes.
#conteneur{
white-space: nowrap;
}
#keywords{
border: 1px solid blue;
width: 100%;
}
#commandes {
border: 1px solid red;
height: 18px;
display: inline;
}
Le problème est que :
- div#commandes doit être de taille variable. Elle doit être obligatoirement collé à droite.
- j'aimerais que l'input#keywords prenne toute la largeur qu'il lui reste.
Je n'arrive pas à obtenir ça.
Si je spécifie un width: 100% à l'input#keywords, celui ci dégage la div#commandes en dehors de la boite.
J'ai pensé à faire flotter div#commandes à droite afin que l'input#keywords vienne se wrapper autour, mais sans succès
Merci pour votre aide.
Modifié par supertino (06 Aug 2012 - 14:16)