jquery fluid layout - avoiding float drop
 

Hi all

Still having a little problem with this one. I have a fluid layout on this site:

http://catherinehyland.co.uk/2012/work/work.html

When the browser is resized a little problem occurs with the menu at the top: the menu items drop down beneath the website name. What I would like to do is keep the menu fluid down to a certain width (say 500px) but then to keep it at that width. I have been told that I could use JS to do this and to prevent the float drop. Can anyone help me with some script?

All the best

S

I think a bit of css will do this for you.
Try setting min-width:500px on both #menu and #cf7.

Thank you! That almost works, but the smaller menu items are still slipping under the name (Catherine Hyland).

Well, yes, but that's because there is insufficient room to fit your current layout into 500px.

A min-width of 640px will prevent the menu going under the name (although to be honest I don't see this as a big issue). You can probably get away with a smaller min-width by reducing the padding on your menu items.

You might also want to look into using @media queries to make your layout responsive - this would allow you (for example) to space your menu items less on a smaller screen.

Thank you
 

Thank you so much! That has been a great help! It works perfectly now.

All the best

Samuel