Incase it’s useful for anyone else I managed to get this working by changing :
var availablespace = $('#nav-main').outerWidth(true) - morewidth;
var availablespace = $('#nav-main').width() - morewidth;
which calculates the width and ignores any margin/padding, allowing me to set padding on the right of the container which the form could be positioned in.
I thought I had a similar example working where an elements width was unknown, heading/text for example. But to get the text and nav to display inline and not wrap I had to set
overflow: hidden; on the nav element. This does create the required layout but now, obviously, the dropdown is hidden when the ‘more’ link is hovered over.
I’m aware this issue might be better suited to the CSS forum but can anyone think of an alternative ‘fix’? I had a play with display inline-block and floating different elements but the script doesn’t seem to like floating certain elements as it freezes up.
I thought I’d document this issue here first before creating another thread in the CSS forum if it can be avoided.