Question

I have a Header/navigation bar on a site, it has a logo, navigation menu, and search box all in-line in that order

So the logo is on the left, followed by the nav menu and the the search box to the right.

The search box is aligned using position: relative; the problem is it is positioned relative to the nav menu which is the div before the search box.

The reason that is a problem, is because the nav menu can be of different sizes, depending on which menu items it is showing.

I need a reliable way to position my search box, is there a way to position a Div relative to a certain Div and not just the Div that is directly before it?

In the image the search box should be positioned over the sidebar, but like I mentioned the nav menu can be of different lengths so If I position relative X off of it, it will be different depending on the width of that menu

Answer 1

Put a wrapper around your nav menu and give it a fixed width.