html/css positioning three text boxes - html

Question

I'm currently trying to code my own portfolio website and struggling to position three text boxes. On my website I would like to have the boxes positioned left, centre and right on the page all in a line.
I have tried different things such as putting each text box in a separate div and trying to position them but they only position below and not next door to each other putting the css rule inline. I have also tried putting the boxes as a list and trying to inline them.
Any ideas?

Answer 1

Try this
<div id="con">
<div class="float">Hello</div>
<div class="float">World</div>
</div>
And the css
.float { float:left; width:100px; height:100px; background:yellow; }
Check JSFiddle here

Answer 2

Maybe this
.foo
{
float: left;
width: 33%;
}

Answer 3

Your html is smth like this:
<div></div>
<div></div>
<div></div>
And the css:
div{width:30%;margin:1%;border:1px solid blue; float:left; height:100px;}
Here is an example:http://jsfiddle.net/795T4/.

Answer 4

have some html like this
<ul class="portfolio">
<li><input id="txtBox1" type="text"></li>
<li><input id="txtBox2" type="text"></li>
<li class="last"><input id="txtBox3" type="text"></li>
</ul>
and css along the lines of
.portfolio{
margin:10px auto;
width:1000px
}
.portfolio li{
float:left;
display:block;
width:330px;
height:200px;
background-color:#e4e4e4;
margin-right:15px
}
.portfolio .last{
margin-right:0
}
this is based on a fixed width site, and i'd use an Unordered List <ul> because semantically you have a list of 3 boxes.