/    Sign up×
Community /Pin to ProfileBookmark

div scroll bar not working with overflow

Copy linkTweet thisAlerts:
Jul 08.2009

Hey everyone, I’m kind of a newb and mostly self-taught so I’m probably making some pretty glaring mistakes here. But here is the web page that I’m trying to get working, it only (somewhat) works in Firefox at the moment, IE is a mess:

[URL=”http://www.lisa-noble.com/test/site_test.html”]http://www.lisa-noble.com/test/site_test.html[/URL]

The CSS:
[URL=”http://www.lisa-noble.com/test/site_test.css”]http://www.lisa-noble.com/test/site_test.css[/URL]

What I want to have is a liquid layout (at least in terms of screen width), and I want that frame to be fixed on the page. I want the content to scroll in the middle.

Right now I can get the scroll bar to show up but it won’t move! There is more content to see but the scroll bar doesn’t budge.

Does anybody have any ideas? Like I said I’m pretty new at this and this is the most complex thing I have attempted thus far. Is what I want to do even possible? :p

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpJul 12.2009 — Well, the scroll bar shows up because the overflow if set to scroll. It will always show up and remain inactive until there is a need to scroll. That will not happen in the #content because the height and width are set to auto. That mean those dimensions can increase at will rendering the scroll bars useless.

So my advice is to set the positioning of all containers using the frame images (#frame_left, #frame_right) to absolute.

For the content use relative positioning or do not define any postioning at all. It would defaullt to static.

Then leave the width and height blank

#content {

margin:145px 150px 60px 160px;

overflow: scroll;

}

defining those margins would force the

width to be 100%-310px (150px+160px)

height to be 100% -205px (145px+60px)

I would use two other divs ((#frame_bottom, #frame_bottom) and split frame_middle.png image with the top part becoming background image of #frame_top (with repeat-x) and the bottom part for #frame_bottom.

If you want your layout to be liquid on the width only then you should specify a height then. Leaving the height to auto is pretty much leaving it to the web browser to fill the viewport both on the width and height.
×

Success!

Help @lisan28 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.18,
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,
)...