CODEWITHSUNDEEP
htmlcsstextboxinline
user1957509
user1957509

Reputation: 7

html/css positioning three text boxes

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?

Upvotes: 1

Views: 4984

Answers (4)

kolin
kolin

Reputation: 2344

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.

Upvotes: 0

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

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/.

Upvotes: 0

shabeer90
shabeer90

Reputation: 5151

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

Upvotes: 1

Zombo
Zombo

Reputation: 1

Maybe this

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

Upvotes: 0

Related Questions