CODEWITHSUNDEEP
htmlcss
sea_1987
sea_1987

Reputation: 2944

How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

I am stuck on figuring out some css, I need a section of my form to look like the following,

CSS float left

I have tried every variation I can think of,

I have given the labels a fixed width and floated them left, then given the inputs the same width and floated them left.

I am all out of ideas, how can I achieve this please?

Upvotes: 20

Views: 125129

Answers (8)

MohamedZh
MohamedZh

Reputation: 466

Here is a simple way to do it

.style1 {display: inline-block;
                         }
<form>
<div class="style1">
  <label for="field1">Company Name</label>
  <br>
  <input type="text" id="field1" name="field1">
  </div>
  <div class="style1">
  <label for="field2">Contact Name</label>
  <br>
  <input type="text" id="field2" name="field2">
  </div>
</form>

Upvotes: -1

Paul D. Waite
Paul D. Waite

Reputation: 98796

You need an HTML element for each column in your layout.

I’d suggest:

HTML

<div class="two-col">
    <div class="col1">
        <label for="field1">Field One:</label>
        <input id="field1" name="field1" type="text">
    </div>

    <div class="col2">
        <label for="field2">Field Two:</label>
        <input id="field2" name="field2" type="text">
    </div>
</div>

CSS

.two-col {
    overflow: hidden;/* Makes this div contain its floats */
}

.two-col .col1,
.two-col .col2 {
    width: 49%;
}

.two-col .col1 {
    float: left;
}

.two-col .col2 {
    float: right;
}

.two-col label {
    display: block;
}

Upvotes: 16

Ricky Freeman
Ricky Freeman

Reputation: 11

This worked perfectly for me without css. I think css would put some icing on the cake though.

    <form>
        <label for="First Name" >First Name:</label>
            <input type="text" name="username" size="15" maxlength="30" />
        <label for="Last Name" >Last Name:</label>
            <input type="text" name="username" size="15" maxlength="30" />
    </form>

Upvotes: 1

user527892
user527892

Reputation: 

<form>
  <label for="company">
    <span>Company Name</span>
    <input type="text" id="company" />
  </label>
  <label for="contact">
    <span>Contact Name</span>
    <input type="text" id="contact" />
  </label>
</form>

label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }

Illustrated at http://jsfiddle.net/H3y8j/

Upvotes: 14

nico
nico

Reputation: 51640

This works well

http://jsfiddle.net/aY9HC/

Upvotes: 5

Ross
Ross

Reputation: 1425

Give this a try

<style type="text/css">

form {width:400px;}

#text1 {float:right;}

#text2 {float:left;}

</style>

then

<form id="form1" name="form1" method="post" action="">


 <label id="text1">Company Name<br />
   <input type="text" name="textfield2" id="textfield2" />
 </label>

 <label id="text2">Contact Name<br />
   <input type="text" name="textfield" id="textfield" />
 </label>


</form>

Test Page: http://jsbin.com/ahelo4

Works for me in the latest versions of Firefox, Safari, Chrome, Opera. Not 100% sure about IE though as im on a Mac, but I cant see why it wouldn't :)

Upvotes: 0

gunwin
gunwin

Reputation: 4832

<div>
<div style="float:left; width:101px; height:auto;">
    <div style="width:200px; float:left;">
        LabelText
    </div>
    <div style="width:200px; float:left;">
        <input type="text" name="textfield" id="textfield" />
    </div>
</div>
    <div style="float:left; width:101px; height:auto;">
    <div style="width:200px; float:left;">
        LabelText
    </div>
    <div style="width:200px; float:left;">
        <input type="text" name="textfield" id="textfield" />
    </div>
</div>



</div>

Upvotes: 1

limc
limc

Reputation: 40168

How about something like this?

<div id="leftContainer">
  <span>Company Name</span>
  <br><input type="text" value="John Lewis Partnership">
</div>
<div id="rightContainer">
  <span>Contact Name</span>
  <br><input type="text" value="Timothy Patten">
</div>

Then, you can align the 2 divs by floating them left and right:-

#leftContainer {
   float:left;
}

#rightContainer {
   float:right;
}

Upvotes: 2

Related Questions