3

I've a fixed width 3 columns css layout working good when vertical scrollbar is hidden, but it will break as soon as vertical scrollbar shows up.

I've 2 questions,

  1. Can I deal with the scrollbar as an css element defining z-index to make it in top of right div?

  2. Since I think the answer to my first question is "No, you can't do that", I ask What can I do to avoid this?

example here:

http://www.mataborrao.eu/teste.html

Christopher Altman
  • 4,868
  • 2
  • 33
  • 49
Pluda
  • 1,479
  • 6
  • 21
  • 45
  • How is the page breaking? The answer to your first question is No. – Christopher Altman Jan 05 '12 at 16:38
  • hello, thanks for reply, page breaks, because the right div, the red one goes down. I was thinking the dom would recalculate div's widths automatically when adding the scrollbar, but now I see that in different browsers, in different os's (mac/win) scrollbars width is also different... – Pluda Jan 05 '12 at 16:42
  • 2
    Pluda, you should accept an answer, it will encourage people to answer your future questions. – Christopher Altman Jan 07 '12 at 16:24

3 Answers3

2

1 - No

2 - One simple option is to always display the scrollbar. Check out this answer: Making the main scrollbar always visible

Community
  • 1
  • 1
Christopher Altman
  • 4,868
  • 2
  • 33
  • 49
2

You're correct on answering your first question; As far as I know, you can't attach styles to the scrollbar. Your second question is somewhat broad, as many browsers out there will deal with scrollbars differently.

For example, depending on your OS/browser, the content on your page will shift to make room for the bar, while other browsers (for instance FF on Windows, I believe), will keep the content where it would be if there wasn't a scrollbar present (this prevents shifting if more content appends/flows vertically).

Alternatively, you could try to force the bar to always be there... this would work in most cases:

html {
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
}

Hope this kinda helps?!

RomoCode
  • 1,099
  • 9
  • 17
0

Would this solution work for you? One of the columns is fluid but perhaps it will help: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

The solution is there for a layout that looks like this:enter image description here

It's trivial to exit the pixel values but take note of the "nested div structure". To convert this to a fixed layout you can look at http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width - I'm not sure that it will work though - you may run into the same problem. I suggested the liquid layout because it will dynamically resize for you when the scrollbar is there...

jcuenod
  • 55,835
  • 14
  • 65
  • 102
  • Thanks, need to try this one, it seems a good way to solve this. Today I haven't here the code, but tomorrow I'll let you know, ok? Thanks. – Pluda Jan 07 '12 at 12:44