Question

EDIT: Here’s a JFiddle for what it looks like currently based off of help from people, still needs a little bit of work though.

I have 12 div’s, and one container div. The 12 div’s in the container div make up 6 pieces of text and 6 corresponding input fields.

I would like it to look like this…

[Text1    Input Item1       Text2   Input Item2       Text3   Input Item3]
[Text4    Input Item4       Text5   Input Item5       Text6   Input Item6]

What is the best way to format this with CSS? I try it out and it just goes all over the place, boxes are misaligned, put on the wrong rows. Could somebody help with this?

<div class="container">
     <div class="text1"></div>
     <div class="InputItem1"></div>

     <div class="text2"></div>
     <div class="InputItem2"></div>

     <div class="text3"></div>
     <div class="InputItem3"></div>

     <div class="text4"></div>
     <div class="InputItem4"></div>

     <div class="text5"></div>
     <div class="InputItem5"></div>

     <div class="text6"></div>
     <div class="InputItem6"></div>
</div>

CSS code:

.container{width:100%;}

.text1{width:15%;float:left}
.InputItem1{width:15%;float:left}       

.text2{width:15%;float:center}
.InputItem2{width:15%;float:center}       

.text3{width:15%;float:right}
.InputItem3{width:15%;float:right}       

.text4{width:15%;float:left}
.InputItem4{width:15%;float:left}       

.text5{width:15%;float:center}
.InputItem5{width:15%;float:center}       

.text6{width:15%;float:right}
.InputItem6{width:15%;float:right}       

Answer 1

Here’s a start: jsFiddle example

HTML

<div class="container" name="container">
     <div class="textitem" name="text1">t</div>
     <div class="inputitem" name="InputItem1">i</div>

     <div class="textitem" name="text2">t</div>
     <div class="inputitem"  name="InputItem2">i</div>

     <div class="textitem" name="text3">t</div>
     <div class="inputitem"  name="InputItem3">i</div>

     <div class="textitem clear" name="text4">t</div>
     <div class="inputitem"  name="InputItem4">i</div>

     <div class="textitem" name="text5">t</div>
     <div class="inputitem"  name="InputItem5">i</div>

     <div class="textitem" name="text6">t</div>
     <div class="inputitem"  name="InputItem6">i</div>
</div>​

CSS

.container{width:100%;overflow:auto;}
div {
    border:1px solid #999;
}

.inputitem,.textitem {
    float:left;  
    width:15%;    
}

Note that I added borders just to make the divs more visible.