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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to stop a div wrapping under another?

    On the breadcrumb on this page:

    http://www.hot-dinners.com/The-City/...ry-dining-room

    "room" wraps underneath the "you are on" section. I don't mind it wrapping, but I would rather "room" aligned underneath "home" (i.e. so nothing wraps under "You are currently on".

    The HTML is:

    Code:
    <div id="breadCrumb">
    <div id="current">You are currently on:&nbsp;</div>
    <div><jdoc:include type="modules" name="breadcrumb" /></div>
    </div>
    The only CSS I'm using is:

    Code:
    #current {
    position: relative;
    float:left;}
    Any ideas on what I need to do would be really helpful!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about
    Code:
    #breadCrumb {/*main.css (line 114)*/
    color:#707070;
    float:left;
    font-size:11px;
    width:auto;
    }
    And you may add white-space:nowrap; to avoid the wrap in any case.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alas, the nowrap command could cause issues for longer names, and the width=auto means the entire restaurant name wraps underneath the "You are currently on" section. Thanks anyway, though.

    I know I could resolve this with a table, but I'm guessing that should be my last resort?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Then give some breathing space, more than 50%. like
    Code:
    #breadCrumb {/*main.css (line 114)*/
    color:#707070;
    float:left;
    font-size:11px;
    width:65%;
    }
    #mod_search_searchword {/*main.css (line 266)*/
    width:130px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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