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 8 of 8

Thread: CSS Overflow

  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Overflow

    Hey everyone,

    Please visit the website 313Coupons.com

    Zoom in so that you can scroll and scroll to the right. You'll notice that the elements " coupons " will go over the left menu. I have no idea what's wrong with my coding. Can you please tell me what I can try?

  • #2
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    i also looking for that.. we have the same problem..

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Did you find a solution yet?

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    You have a fixed position menu on the left. This means that the menu is fixed in relation to the window. So if the window goes smaller than the sidebar, it wont affect the scroll bars because you're telling the browser "i always want this sidebar right here, dont allow me to scroll away from it". You can either instead position it absolutely or better float it to the left.

  • Users who have thanked msevrens for this post:

    raydin (04-28-2011)

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This is the css for the sidebar:

    Code:
    /* SIDEBAR */
    #sidebar{	
    	width: 285px; 
    	float: left;
    	margin: 0 15px 0 0;
    	height: 100%;
    	position: fixed; 
    }
    I have it this way because I don't want it to scroll. If it just floats on the left then it will scroll.

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Think about it this way, when the window becomes smaller than the sidebar, what would you want it to do? You can't force the window to stay at minimum the height of the content because user has control of the size of the window. All fixed position sites have this problem. This site for example uses a fixed position side bar and has the same problem: http://dougneiner.com/

    If you don't want the window to cut off your content, you have to make sure that the side bar is sufficiently short that you wouldnt expect the window to be smaller than it. Or allow the side bar to scroll out of view when the window is too small.

    Fixed positioning is great for foooters: http://www.theimaginaryzebra.com/

    in this example when you resize the site, the footer sticks to the bottom of the page. The navigation on this page is also fixed positioning, and you'll see when the window gets too small it also cuts off. Thats just how fixed positioning works.

  • Users who have thanked msevrens for this post:

    raydin (04-28-2011)

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I see what you mean.

    Howver, in that http://doughneiner.com website, did you notice how the content actually goes under that fixed sidebar? That's my aim.

  • #8
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    add z-index: 9999; in #sidebar style

    #sidebar {
    z-index: 9999;
    :
    :
    :rest properties
    :
    :
    }


  •  

    Posting Permissions

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