/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Feb 19.2013

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 [U]without allowing it to spill over beyond the right edge of the window/opening the horizontal scroll bar[/U] 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.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Joseph_SlikerauthorFeb 19.2013 — 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.
Copy linkTweet thisAlerts:
@Joseph_SlikerauthorFeb 19.2013 — 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.
Copy linkTweet thisAlerts:
@Joseph_SlikerauthorFeb 19.2013 — 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.
Copy linkTweet thisAlerts:
@Joseph_SlikerauthorFeb 20.2013 — 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/layouts/item/css-left-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).
×

Success!

Help @Joseph_Sliker spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...