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

Question

I am stuck on figuring out some css  I need a section of my form to look like the following      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

User · Answer

Give this a try   lt style type  text css  gt   form  width 400px     text1  float right     text2  float left     lt  style gt    then   lt form id  form1  name  form1  method  post  action    gt      lt label id  text1  gt Company Name lt br   gt      lt input type  text  name  textfield2  id  textfield2    gt    lt  label gt     lt label id  text2  gt Contact Name lt br   gt      lt input type  text  name  textfield  id  textfield    gt    lt  label gt     lt  form gt    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

User · Answer

How about something like this    lt div id  leftContainer  gt     lt span gt Company Name lt  span gt     lt br gt  lt input type  text  value  John Lewis Partnership  gt   lt  div gt   lt div id  rightContainer  gt     lt span gt Contact Name lt  span gt     lt br gt  lt input type  text  value  Timothy Patten  gt   lt  div gt    Then  you can align the 2 divs by floating them left and right -   leftContainer      float left      rightContainer      float right

User · Answer

You need an HTML element for each column in your layout   I   d suggest   HTML   lt div class  two-col  gt       lt div class  col1  gt           lt label for  field1  gt Field One  lt  label gt           lt input id  field1  name  field1  type  text  gt       lt  div gt        lt div class  col2  gt           lt label for  field2  gt Field Two  lt  label gt           lt input id  field2  name  field2  type  text  gt       lt  div gt   lt  div gt    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

User · Answer

lt div gt   lt div style  float left  width 101px  height auto   gt       lt div style  width 200px  float left   gt          LabelText      lt  div gt       lt div style  width 200px  float left   gt           lt input type  text  name  textfield  id  textfield    gt       lt  div gt   lt  div gt       lt div style  float left  width 101px  height auto   gt       lt div style  width 200px  float left   gt          LabelText      lt  div gt       lt div style  width 200px  float left   gt           lt input type  text  name  textfield  id  textfield    gt       lt  div gt   lt  div gt      lt  div gt

User · Answer

lt form gt     lt label for  company  gt       lt span gt Company Name lt  span gt       lt input type  text  id  company    gt     lt  label gt     lt label for  contact  gt       lt span gt Contact Name lt  span gt       lt input type  text  id  contact    gt     lt  label gt   lt  form gt   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

User · Answer

This worked perfectly for me without css  I think css would put some icing on the cake though        lt form gt           lt label for  First Name   gt First Name  lt  label gt               lt input type  text  name  username  size  15  maxlength  30    gt           lt label for  Last Name   gt Last Name  lt  label gt               lt input type  text  name  username  size  15  maxlength  30    gt       lt  form gt

User · Answer

This works well  http   jsfiddle net aY9HC

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

Examples related to html

Examples related to css