CSS Display Textboxes - css

Question

Thanks to James Donnelly, this has been solved. My example has been updated to the working solution.
My reputation isn't high enough so I can't post an image, so I am going to try and describe it as best as possible. I have 7 textboxes and a textarea on a form, and when I load the page, it currently loads each textbox on a separate line.
However, I want the textboxes to load like this:
1 2 3
4 5 6 7
---8--- (span across)
Should I put each row inside a div? I tried floating each textbox to the left, but that does not work correctly. I have Twitter bootstrap setup in my project if that makes things easier.
Here is my working code:
<div class="well">
<h4>Enter Movie in System:</h4>
#using (Html.BeginForm()) {
<div>
<div class="input-prepend">
<span class="add-on"><i class="icon-film"></i></span>
#Html.TextBoxFor(m => m.Title, new { placeholder = "Title" })
#Html.ValidationMessageFor(m => m.Title)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-facetime-video"></i></span>
#Html.TextBoxFor(m => m.Director, new { placeholder = "Director" })
#Html.ValidationMessageFor(m => m.Director)
</div>
#* Make dropdown *#
<div class="input-prepend">
<span class="add-on"><i class="icon-tags"></i></span>
#Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
#Html.ValidationMessageFor(m => m.parentGenre)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-star-empty"></i></span>
#Html.TextBoxFor(m => m.Stars, new { placeholder = "Actor" })
#Html.ValidationMessageFor(m => m.Stars)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-time"></i></span>
#Html.TextBoxFor(m => m.Duration, new { placeholder = "Duration (mins)" })
#Html.ValidationMessageFor(m => m.Duration)
</div>
#* Make dropdown *#
<div class="input-prepend">
<span class="add-on"><i class="icon-warning-sign"></i></span>
#Html.TextBoxFor(m => m.Rating, new { placeholder = "Rating" })
#Html.ValidationMessageFor(m => m.Rating)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-calendar"></i></span>
#Html.TextBoxFor(m => m.releaseDate, new { placeholder = "Release Date" })
#Html.ValidationMessageFor(m => m.releaseDate)
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-comment"></i></span>
#Html.TextAreaFor(m => m.Description, new { placeholder = "Description", #class="input-xxlarge" })
#Html.ValidationMessageFor(m => m.Description)
</div>
</div>
<p>
<button class="btn" type="submit" value="Register">Register</button>
</p>
#Html.ValidationSummary()
</div>
}

Answer 1

.content-group is by default set to display:table; which is what's forcing each of your inputs down onto a new line. You'd simply need to put each of your .input-prepend containers into just one container:
<div>
<div class="input-prepend">
<span class="add-on"><i class="icon-tags"></i></span>
#Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
#Html.ValidationMessageFor(m => m.parentGenre)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-tags"></i></span>
#Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
#Html.ValidationMessageFor(m => m.parentGenre)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-tags"></i></span>
#Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
#Html.ValidationMessageFor(m => m.parentGenre)
</div>
</div>

Answer 2

Is this what u mean?
<div>
<input id="tbx1" />
<input id="tbx2" />
<input id="tbx3" /><br />
<input id="tbx4" />
<input id="tbx5" />
<input id="tbx6" />
<input id="tbx7" />
<span id="span1" style="padding-left:200px">
<input id="tbx8" />
</span>
</div>

Answer 3

you have to post the css style you have tried. but I am guessing that giving the form a float left, width and height should let you be able to float the input fields, make sure none of the first six inputs is greater than 30% of the form width. for the last one width 100%