www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Simple(?) Newbie question: Prevent horizontal scrolling of right-side content column

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    8

    resolved [RESOLVED] Simple(?) Newbie question: Prevent horizontal scrolling of right-side content column

    Hi; This is my first post here (The nice folks at board.phpbuilder.com recommended me to this forum)

    I've used a little css (by rote/concrete examples) over the last few years but I am trying to update some of my VERY antiquated (read <frame> -based) sites with css/<div>s. I think I get the basics of how this can work, but I am having trouble with the following (probably very basic) scenario.

    A two "column" page with a static/immobile vertical stack of menu buttons. This css statement seems to work fine for that:

    div.leftcontent {
    position: fixed ;
    word-wrap: break-word;
    margin-top: 0px ;
    margin-left: 5px ;
    width: 150px ;
    line-height: 1.3em ;
    text-align: center ;
    }

    However, I am mystified as to how to define "div.rightcontent" (ie. take up the remaining space available in the remaining window area for content without allowing it to spill over beyond the right edge of the window/opening the horizontal scroll bar When this happens, the user can scroll the content...but it slides over the left menu bar area...which is clearly going to be confusing and/or unimpressive for my users.

    Here is the (obviously wrong) definition for div.rightcontent that I have in place at the moment:
    div.rightcontent {
    position: absolute ;
    word-wrap: break-word;
    margin-top: 0px ;
    margin-left: 160px ;
    margin-right: 0 ;
    width: auto ;
    line-height: 1.3em ;
    padding-right: 0.5em ;
    }

    is there a way to make what I describe work on ANY dimension screen width (ie. the menu takes up 150 px...so on a low rez screen the user would still have 490px to the right where as others might have a couple thousand px to the right.

  2. #2
    Join Date
    Feb 2013
    Posts
    8
    Well, a lot of people have LOOKED at this question. Maybe I need to re-frame the issue a bit.

    I just want the left menu to sit solidly where it is (not scroll up with the page), and the content on the right side of the page COULD scroll in any direction, but I don't want that content to scroll over (or be visible under) the menu bar on the left. side of the window. I am thinking if I put an opaque rectangular background image behind the menu bar, maybe that would simulate what I have in mind, but it seems like a kludge.

  3. #3
    Join Date
    Feb 2013
    Posts
    8
    Well, a lot of people have LOOKED at this question. Maybe I need to re-frame the issue a bit.

    I just want the left menu to sit solidly where it is (not scroll up with the page), and the content on the right side of the page COULD scroll in any direction, but I don't want that content to scroll over (or be visible under) the menu bar on the left. side of the window. I am thinking if I put an opaque rectangular background image behind the menu bar, maybe that would simulate what I have in mind, but it seems like a kludge.

  4. #4
    Join Date
    Feb 2013
    Posts
    8
    Okay...I think I have figured out something that will work for my purposes. It simulates the behavior that I want by:
    ...create the menu bar with the left side <div>, and style that div with a solid background color. ALSO give the left div a z-index number greater than a z-index for the right div. This way, even though when it appears under conditions of over-wide content, the horizontal scroll-bar goes all the way accross the bottom of the explorer window, what it does is allows the user to slide the content of the right "pane" (div, actually) BEHIND the opaque rectangle on which the menu appears.

    Perhaps there is a better, more "official" way of doing this, but this will at least get me un-stuck for the moment.

    div.leftcontent {
    background:#ffffcc; /*an opaque background color for the dimensions of this div*/
    height: 800px;
    width: 150px;
    border: 0px #ffffcc;
    position:fixed ;
    word-wrap: break-word;
    margin-top: 0px ;
    margin-left: -10px ; /*seems to need negative number here so sliding content does not appear in far left "slot" between browser edge and left edge of menu*/
    line-height: 1.3em ;
    text-align: center ;
    z-index:10; /*this is the highest number i will use: keeps this div front-most*/

    }

    div.rightcontent {
    background:#ffffcc;
    height: auto;
    width: auto;
    border: 0px #ffffcc;
    position: absolute ;
    word-wrap: break-word;
    margin-top: 0px ;
    margin-left: 150px ;
    margin-right: 0 ;
    line-height: 1.3em ;
    padding-right: 0.5em ;
    z-index:0; /*low number here means this will slide BEHIND the menu*/
    }

    perhaps this solution will be useful to someone else.

  5. #5
    Join Date
    Feb 2013
    Posts
    8
    ...the site with all the ideas is:

    http://designshack.net/articles/css/...e-css-layouts/

  6. #6
    Join Date
    Feb 2013
    Posts
    8
    One of the many helpers I've found over at phpbuilder.com pointed me to a site that had several hundred nicely cataloged css layout methods and I quickly found one that seems to do the trick:

    http://www.dynamicdrive.com/style/la...-frame-layout/

    I will have to try this out and see if I can understand it's merits relative to the method I came up with (above).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles