CSS: il campo di input (larghezza 100%) va accanto alla riga del semplice layout di 2 cols

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

Domanda

Ho un semplice layout di 2 cols (Larghezza fissa a sinistra COL 200px e il COL destro si espande al 100%).

Se il 1 ° elemento del Col destro è un P elemento tutto va bene.

Ma Quando il 1 ° elemento del Col destro è un INPUT elemento (width:100%), scende.

Il risultato spostato è sotto (testato su Chrome, FF, IE):

enter image description here

Potresti spiegarmi perché il campo di input va successivo alla riga mentre l'elemento P no? E come risolvere questo problema?

Il codice è qui:

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

Nessuna soluzione corretta

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top