How can I make it so that my inline elements don’t slide under fixed elements when the window is resized and scrolled horizontally? I’m looking for a solution that preferably only uses CSS, but if needed, I’m willing to pump out some jQuery to fix the issue as well.
Ah my bad. I forgot to mention. You have to click the links to generate the rest of the content on the website. If you click on “Blog” it will generate a list of links next to it. Then if you click on a link in the generated links it will generate a “blog post” next to that list. That’s when you resize the window and scroll horizontally to see the issue.
Ah thank you! I’ll try it in a bit and let you know if the solution works for me.
One of the costs will be your users not being able to see or access any part of the menu that extends beyond the viewport. That’s just the way ‘fixed’ works. Even with the browser maximized, 1920×1200px monitor, part of the menu is cut off.
What do you expect to happen when scrolling? You sure don’t want it to become hidden as it scrolls off the left side of the content area. Your visitors, if they stayed around, would want to call out the village with torches and pitchforks after trying to read by scrolling back and forth for each line. The least silly method requires setting the z-index to some value greater than the fixed elements’, so it rides over the fixed elements, and setting a background other than the default transparent. So try this:
#content {
background: url("images/background.jpg") repeat scroll right top white;
float: left;
margin: 35px 0 10px;
position: relative;
z-index: 1;
}