CSS: input field (width 100%) goes next line on simple 2 cols layout

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

Question

I have a simple 2 cols layout (left col fixed width 200px, and right col expand 100%).

If the 1st element of the right col is a P element everything it's ok.

But when the 1st element of the right col is an INPUT element (width:100%), it goes down.

The result displaied is below (tested on Chrome, FF, IE):

enter image description here

Could you explain me why the INPUT field goes next line whilest the P element does NOT? And how to fix this?

The code is here:

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

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top