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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts

    how to prevent the div content from appearing in 2 lines when window is gets smaller?

    hello guys,

    can someone please tell me what can i do to prevent the content of my gray div that has as title "shipping and policies" from appearing in two lines when the window gets smaller? I would prefer the window to get a scroll bar instead.

    here is my site www.neighbourhoodnerds.com

    if i put float:left on the footer css it kind of does what i want but my sizes get messed up. Im soooo lost now. if someone an give me soem good suggestions ill appreciate it a lot
    Thanks!!!
    Last edited by TheMassacre; 07-05-2012 at 02:02 AM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Add to the CSS for the div:

    white-space : nowrap
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    TheMassacre (07-05-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks a lot felgall it kind of did the trick but unfortunately my text is getting cut off now LOL is there way that i can add the horizontal scroll bar when the text is about to get cut off? or can anyone point me in the right direction

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    This should do it:

    Code:
    white-space;nowrap; overflow-x:auto;
    Test it in IE, which might put the scrollbar over the top of the bottom portion of the text, when the text is only one line. Might need to specify a height for the div tag.

    Will
    Last edited by Will Bontrager; 07-05-2012 at 11:50 AM. Reason: fix typo
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

  • Users who have thanked Will Bontrager for this post:

    TheMassacre (07-05-2012)

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for ur suggestion WILL!!!!

    I gave it a try n was able to get a scroll bar in the gray box but unfortunately dats not wat im looking for. Is there anyway i can get the horizontal scroll bar on the browser to appear when the text in the gray box is about to appear in two lines????

  • #6
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Had misunderstood what you are looking for. Sorry.

    Try giving the gray area
    Code:
    min-width:180px;
    for a minimum width and still allowing it to expand wider.

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]


  •  

    Posting Permissions

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