CSS: champ de saisie (largeur 100%) va la ligne suivante sur la disposition simple 2 cols

StackOverflow https://stackoverflow.com/questions/5423485

Question

J'ai une disposition simple de 2 cols (la largeur fixe de COL gauche 200px, et le col de droite se développe à 100%).

Si le 1er élément du droit de droite est un P Élément tout ce que ça va.

Mais Lorsque le 1er élément du droit de droite est un INPUT élément (width:100%), ça descend.

Le résultat découragé est ci-dessous (testé sur Chrome, FF, IE):

enter image description here

Pourriez-vous m'expliquer pourquoi le champ de saisie va la ligne suivante tandis que l'élément P ne le fait pas? Et comment réparer cela?

Le code est ici:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title></title>
   <style type="text/css">
      body {background-color: #eeeeee;}
      div.left {float:left; width:200px; border:1px solid #ff0000;}
      div.right {     margin-left:200px; border:1px solid #00ff00;}            
      div.right p, div.right input {width:100%; border:1px dashed #0000ff;}
   </style>
</head>
<body>

   <div>
      <div class="left">
         <p>left div</p>
      </div>
      <div class="right">
         <p>I'm a P 100% width inside right div</p>
      </div>
   </div>

   <br>

   <div>
      <div class="left">
         <p>left div</p>
      </div>
      <div class="right">
         <input name="name" type="text" value="I'm an INPUT 100% width inside right div, why i'm down???">
      </div>
   </div>

</body>
</html>

Pas de solution correcte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top