overflow:hidden not working [Archive]

bsmbahamas

04-27-2010, 06:19 PM

*nevermind it works now*

hi guys i have 2 divs, one nested inside the other.

i want the outer div to have a small fixed height of say 100px,
but the inner div will have a much bigger height of say 300px.

when i set overflow:hidden on the smaller outer div that wraps
around the longer inner div, the contents of the innner div remain visible.

if i set overflow:hidden on the inner div and give it a smaller height, so that
it has too much content it hides the extra content as expected.

is it not possible to hide the excess height/content of the inner div,
by applying a smaller height and setting overflow:hidden on the smaller
div?

my intent is to scroll the inner div up and down while the outer div acts like
a window that will only display some of the inner div as it scrolls up and down

Fang

04-30-2010, 12:53 AM

1 div is enough:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
p {height:100px;width:200px;overflow:hidden;overflow-y:scroll;}
</style>

</head>
<body>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. </p>
</body>
</html>

bsmbahamas

04-30-2010, 01:13 PM

1 div is enough:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
p {height:100px;width:200px;overflow:hidden;overflow-y:scroll;}
</style>

</head>
<body>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. </p>
</body>
</html>

i didn't know you could do this, but it is not what i was trying to do, but helpful all the same.

i have resolved it already.

what i did was to create 2 divs, one acts as a 100 pixel high wrapper, the inner div holds about 20 links but only 4 show a t a time. i have positioned two graphical arrows to the left that will scroll the inner div up and down as you click them, and when you select an article i use ajax+jquery to fade in the whole article below the div holding the content.

it works great, you can basically scroll theorugh the last 20 articles and when you select one it fades in without refreshing the whole browser.

i may update it to scroll the articles left and right and load the links when he arrow are clicked rather than having a big hidden/clipped div.

thanks much your advise is still very useful.