0

I have 3 input fields and one of them I want a caption to go under. I have the input fields inside their own div and each divs are set to inline-block. As of now the middle input box raises higher than the left and right ones because of the caption below it. I am trying to push the input box down a little, but the other input boxes keep moving down with it, even though they're inside their own divs. I usually would do this with a table, but I am trying to understand divs more and positioning them.

Can someone please point me in the right direction?

I tried putting a child div in each and the input in each child div, and then setting the child div relative to the parent div, but it keep behaving the same way - each time I give a margin-top on either the div or the input field the other input fields move too, and nothing (that I know of) is set to make this happen other than defaulted this way.

eaglei22
  • 2,589
  • 1
  • 38
  • 53
  • The solution will probably involve some change to your HTML and CSS, depending on what your HTML / CSS looks like. To help get this started, would it be possible for you to include the HTML and CSS you are using? Thanks – clarity123 Feb 23 '16 at 23:42
  • Thanks, but looks like anthonyrobert's answer did the trick. – eaglei22 Feb 24 '16 at 12:18

1 Answers1

2

Use:

vertical-align: top;

Fiddle: https://jsfiddle.net/ot2ojahb/

If you want to move them all down, add a padding-top to the div

anthonyroberts
  • 217
  • 2
  • 10