Inline elements slide under fixed elements problem

HTML & CSS
1

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.

Here’s the demo site:
Blog and portfolio of programmer and designer Isaac Lean

To replicate the problem:

  1. Resize the window to any point where the horizontal scrollbar appears
  2. Scroll right and you will see the inline content will slide under the fixed elements
2

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.

3

I dealt with exactly the same question/problem statement last night and this morning. See CSSCreator thread. Only the linked page was different.

cheers,

gary

4

Hi Isaac Lean. Welcome to SitePoint. :slight_smile:

Is that the right link? There’s not really enough on that page for us to test a browser resize.

5

[ot]Villagers!

Pitchforks!

Torches!

Kill the monster!

To the castle!

Fire! Kill it with fire!

Ah, childhood relived[/ot]

6

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;
}

cheers,

gary

7

Alright I just read the topic and it doesn’t apply to me since your solution was to remove position:fixed. I want to keep position:fixed at all costs. :confused:

8