Reply To: Search Bar is displayed wrong!


Ernest Marcinko


The main problem there is that the search is placed within a form element, which yields an invalid HTML output – because the search itself has a form element to store the fields. A form within a form is not allowed in HTML, and as the browser tries to correct it, will cause more issues.

One possible solution could be to change the outer form element to a DIV element, like so:

But this still might not fix the layout issue, but at least the HTML is parseable now. Header elements are usually flexible, simple text elements, and does not work well with ‘%’ value widths, so they are simply shrinked. So, I recommend changing the search bar width to a pixel value, like so:

This may not solve the issue completely, but at least make a progress in the right direction.

Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)