CSS overflow: hidden; does not work

Question

I am having issues with overflow: hidden not working in my case.

I have a div id=ticker which basically works like a scrolling ticker. So i am prepending dynamic content to div id=ticker

The div id=ticker is contained in another div which is contained in another div, basically think of it like 4-5 level tree like structure

body -> div[id=wrapper] -> div[class=main] -> div[class=content] -> div[class=frame] -> div[class=bg] -> div[class=primary-content] -> div[id=ticker]

Heres the css...

#wrapper {
 width: 942px;
 margin: 0 auto;
 position:relative;
 overflow:hidden;
}

.main{
 width:942px;
 margin:163px 0 0;
 overflow:hidden;
}

.content{
 background:url(../images/content-bg.gif) repeat-y;
 overflow:hidden;
 width:662px;
 float:left;
}

.frame{
 background:url(../images/frame-bg.gif) no-repeat 0 0;
 width:662px;
}

.bg{
 background:url(../images/bg-bg.gif) no-repeat 0 100%;
 width:662px;
 overflow:hidden;
}
.primary-content{
 padding: 12px 20px 40px 22px;
 width:620px;
 overflow:hidden;
}

#ticker {
    overflow: hidden;
}

Also if it helps - the ticker div contains a list of div[class=breadcrumps], which i am trying to scroll

.breadcrumbs{
 border-bottom:1px solid #ebebeb;
 padding:6px 0 6px 0;
 overflow:hidden;
 clear:both;
}

What i see is - when i prepend breadcrumps div to ticker, the page/ticker list keeps getting bigger :(

Any help would be appreciated.

Thanks.

Funky Dude · Accepted Answer · 2010-04-07 01:18:05Z

21

you need to define width and height in order for overflow to work, otherwise it would just expand.

answered Apr 7, 2010 at 1:18

Funky Dude

3,9672 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kapso Over a year ago

O yes makes sense, fairly logical :) i put a height in ticker div and it works. Thanks a lot for your help. Although, my breadcrumps div inside the ticker are of variable height, so having a fixed ticker div does not make sense, but i guess thats the only solution it seems.

Collectives™ on Stack Overflow

CSS overflow: hidden; does not work

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related