You are viewing limited content. For full access, please sign in.

Question

CSS form fields side by side not working

Forms

Updated May 26, 2020

asked on May 26, 2020

I am using the following CSS code:

#q115, #q117 {display: inline-block; width: 15%; vertical-align:top;}
#q118, #q119 {display: inline-block; width: 30%; vertical-align:top;}

The problem is that all four fields are on the same line.

I would like q115 & q117 on the same line, then q118 & q119 on the same line below.

Any ideas?

0 0

Replies

replied on May 26, 2020

Your widths are 15%, 15%, 30%, 30% which is combined less than 100% (so they can all fit on 1 line). Make your percentages larger so the third and fourth field cannot fit on the first line.

0 0

replied on May 26, 2020

Alternatively you can add a margin to the right of the first line's elements:

#q117 { margin-right: 70%; }

0 0

replied on May 26, 2020 • Show version history

I used the following and it worked.

#q115, #q117 {display: inline-block; width: 30%; vertical-align:top;}
#q118, #q119 {display: inline-block; width: 50%; vertical-align:top;}
#q119 .cf-medium {width: 150%;}
#q119 .cf-field {width: 150px;}
#q120, #q121 {display: inline-block; width: 50%; vertical-align:top;}
#q122, #q123 {display: inline-block; width: 50%; vertical-align:top;}
#q124, #q125 {display: inline-block; width: 50%; vertical-align:top;}
#q126, #q127 {display: inline-block; width: 50%; vertical-align:top;}

Question

Question

CSS form fields side by side not working

Replies

Sign in to reply to this post.