Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think a bit of css will do this for you.
    Try setting min-width:500px on both #menu and #cf7.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you! That almost works, but the smaller menu items are still slipping under the name (Catherine Hyland).

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thank you

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

    All the best

    Samuel


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •