Solved: Aligning two divs containing different elements help

using vertical-align: top on the second div fixed everything.

In my wikisearch project I am having trouble aligning a search input that takes text and a submit button that contains an image (either inside the button or as a background). I have replicated the issue with this simple Pen. It seems like it has to do with how text and images align vertically inside of the divs. I want to avoid using position absolute because in my project when the input field is clicked on, the width changes and the button moves to the right. Can anyone tell me what is happening here, and how I can correctly align them?

Here is the simple example:

and here is my project:


have you looked at ?

Thanks, definitely a good resource to look through, but I’m not using bootstrap and would love to know why this happens. Why don’t the div’s just stay in place and the content display inside of them?

your magnifying glass image is causing the issue. notice that if you hardcode your image to be 50px (WxH) your divs will line up

EDIT: alternately since your image is wrapped in a div you can set width and height = 100% (or less, as desired)

If I hardcode the image to be 50px x 50px in the first example it almost lines up, though it is still offset by a couple of pixes.

In my actual project however, this doesn’t seem to help at all.

Tried it in Opera, Firefox and Chrome. With no text in the first div it almost works but is still off by a few pixes. As soon as I put text in the first div it goes way off.

Just put float: left on the first div :slight_smile:

Hi Derek,

You should try adding
vertical-align: top;
in your first example. Let me know if it works!
more info

This is the best solution for me! the float left worked, but in my project the input (first div) is centered and expands when clicked, but the vertical align works perfectly, thanks!

1 Like