View Full Version : CSS Overflow

04-26-2011, 04:53 AM
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?

04-26-2011, 08:36 AM
i also looking for that.. we have the same problem.. :(

04-27-2011, 05:36 AM
Did you find a solution yet?

04-27-2011, 08:00 AM
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.

04-28-2011, 06:13 AM
This is the css for the 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.

04-28-2011, 07:36 AM
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.

04-28-2011, 07:55 AM
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.

04-29-2011, 11:36 PM
add z-index: 9999; in #sidebar style

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