form problem

[rawb]

My problem is that three input boxes on my form, each of which have { width: 33% }, are displayed on different lines.. up to 666px (scarily enough).  When the width is 667px, all three fit on the same line (which is what I want, but at any width)..

 

The file is here (simplified, obviously):

http://rawbwk.com/test.html

 

The CSS:

* {
  padding: 0;
  border: 0;
  margin: 0;
}

#container {
  width: 666px;
  margin: auto;
  border: 1px solid black;
}

#t1 {
  width: 100%;
}

.t2 {
  width: 100%;
}

.t2 input {
  width: 33%;
  background-color: red;
}

 

 

The HTML:

<div id="container">

  <div id="t1">Test

  <div class="t2">

    <input name="test1"></input>
    <input name="test2"></input>
    <input name="test3"></input>

    </div>

</div>
</div>

 

Thanks in advance...

[AndyB]

Partly, it's a white space issue.  Put all the inputs on the same code line and they all appear in a single 'row'.

 

Fails:

<input name="test1"/> <input name="test2"/> <input name="test3"/>

 

Works:

<input name="test1"/><input name="test2"/><input name="test3"/>