Pb input 100% dans div + pb padding et border dans div

Bonsoir à tous !

Voilà j'ai 2 soucis,
1er:

<div style="width:100px; background-color:#FF0000;">
voici mon champ qui dépasse
<input name="site" type="text" style="width:100%;" id="site" />
</div>

Le champ input dépasse systématiquement de mon div, pourquoi donc ? Est-il possible que mon champ soit de la longueur totale de mon div sachant que je ne dois pas utiliser une valeur fixe, le div pourra changer de taille.

2ème:

<div style="width:50%; float:left; padding:5px; border:1px solid #000000;">1ère colonne</div>
<div style="width:50%; float:left; padding:5px; border:1px solid #000000;">2ème colonne</div>

La 2ème colone devrait se trouver à droite, cependant elle est décalée en dessous car la somme totale pour un seul div est de 50%+10px(padding)+2px(border) donc forcément avec 2 div comme ça il passe à la ligne car la longueur est supérieur à 100%. Comment pourrait-on faire en sorte de garder mon padding mon border mes 50% de chaque colone et tout ceci sans ajouter d'autre div que ces 2 là.

J'espère m'être expliqué clairement, merci d'avance !

Bonsoir,

elbarto a écrit :
Le champ input dépasse systématiquement de mon div, pourquoi donc ?

Largeur de 100%, plus la largeur des bordures latérales de l'input. Donc ça dépasse de la largeur des bordures.

J'ai tenté un display: block pour que l'input prenne naturellement toute la largeur disponible, mais ça ne passe pas (du moins pas avec Firefox).

Donc si tu veux utiliser un width: 100% il faudra éviter bordures et padding latéraux.

elbarto a écrit :
Comment pourrait-on faire en sorte de garder mon padding mon border mes 50% de chaque colone et tout ceci sans ajouter d'autre div que ces 2 là.

À ma connaissance c'est impossible.

La solution simple consiste effectivement à imbriquer deux blocs : l'un aura une largeur déterminée en pourcentage, et l'autre portera bordures et padding.


Sinon, juste pour mémoire, il est prévu avec CSS 3 que l'on puisse basculer d'un modèle de boite à un autre avec la propriété box-sizing. ... Ah non, en fait ça a été remplacé par les propriétés box-width et box-height, semble-t-il. Voir ici :
http://www.w3.org/TR/css3-box/#the-box-width

Mais ça reste 1) très hypothétique (pas sûr que ça soit dans la spécification finale) et 2) bien entendu inapplicable à l'heure actuelle.

Merci beaucoup pour ces précisions