I think the problem is too
I think the problem is too many floating elements with margins and padding hitting up on each other.
The way I would approach this layout is like this:
1) Is it possible to combine the banner "h1" element with the background image of the header? this seems logical to reduce creating two separate elements. If this is not possible then the best way to do this would be to set the header position to -relative-, then set the position of the h1 element to -absolute-, then use top, left, to align the h1. You may also want to put h1 into header, so that you can use h1 in another part of your site without conflicting it with the header h1.
2) Do the same with the topright, set it to position -absolute- and position it with top, right properties.
3) Do the same with search box.
4) Do the same for menu.
The reason I recommend using absolute positioning for these elements is because the "header" portion has a definite height and width, so its easier to use absolute positioning there since you have a couple of elements.
id searchbox used twice ?
Use valid html (id searchbox is used twice)
Removing the second one should fix the issue.
Or you can do that . good
Or you can do that . good one. I totally missed it.
Perfect suggestion! thanks so much, onward to the rest of the site, haha.