How to keep search box and web site logo at same level

Question

logo is being shifted down when I add search box

Answer 1

set top margin of your logo div or td

Answer 2

@chirag:i suggest him table because its a basic concept and after little bit practice he will manage this things in div also

Answer 3

make it in same row using different td

Answer 4

@Krishna: Using the tables for layout is a legacy practice and it's not at all recommended for web design due to poor responsiveness

Answer 5

This is because a block element(the search bar) starts from a new line. In such a situation, you should either enclose both the elements within any tag such as the <header> or the <div> tag and set the display property to flex(of the parent tag).

The other solution for this is to set the display properties of the logo and search bar as inline-block. If you use this method you would not need to enclose them within any tag.

Answer 6

What is flexbox?

Answer 7

How to set

Answer 8

i strongly suggest you to use flexbox if you are not Target IE < 11 and according to current data 93% of currently using webbrowser supports flexbox.

Answer 9

It is easy! use position: absolute to the wrapper of search and use position: relative to your logo.