168

I am having a tough time with overflow: hidden.

Basically, I am trying to hide the overflow of an unordered list which is located in a <div>.

I have no idea why this isn't working though.

Instead of hiding it, it breaks my list from a horizontal layout to a vertical layout.

The unordered list is carousel and the container is list.

Below is my CSS code;

div.body .container .images { background: url(/images/images-background.jpg); height: 62px; margin-bottom: 17px; width: 384px; } div.body .container .images #images-previous { cursor: pointer; float: left; } div.body .container .images #images-next { cursor: pointer; float: left; } div.body .container .images .list { float: left; overflow: hidden; vertical-align: top; width: 336px; } div.body .container .images .carousel { margin-bottom: 6px; margin-top: 8px; width: 336px; }

Here, my HTML;

<div class="images"> <div id="images-previous"> <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" /> </div> <div class="list"> <ul class="carousel"> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <li> <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /> </li> <!-- <cfset i=1> <cfloop condition="i lte images.recordcount"> <cfoutput> <li> <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" /> <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" /> <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" /> </li> </cfoutput> <cfset i=i+1> </cfloop> </cfset> --> </ul> </div> <div id="images-next"> <img src="/images/images-next.jpg" width="24" height="62" alt="Next" /> </div> <div class="clear"></div>
Improve this question
5
  • 2
    Is there anything speaking against giving .list a fixed height? I think it would work then. Commented Oct 19, 2010 at 16:25
  • 2
    @Pekka, it will, i checked. Assuming that the CSS rules apply (because the HTML posted here does not show the div.body and the .container elements) Commented Oct 19, 2010 at 16:32
  • 1
    That didn't work. It wraps the list if the list overflows instead of hiding it. Commented Oct 19, 2010 at 17:01
  • 1
    How did your <li>'s get a horizontal layout? Have you missed showing us some CSS? What exactly is this for? An image slider? Commented Oct 19, 2010 at 17:17
  • 1
    Hi guys, turns out I cannot use a horizontal menu because the float or inline display will always spill because of the parent width. I am trying a table now but thats being a pain as well. Commented Oct 19, 2010 at 17:42

7 Answers 7

Reset to default
540

Ok if anyone else is having this problem this may be your answer:

If you are trying to hide absolute positioned elements make sure the container of those absolute positioned elements is relatively positioned.

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

3 Comments

I had a similar problem with relatively positioned content in a container and needed the container to be relative too. So its not just hiding absolutely positioned elements, its hiding any positioned elements its looking like. :)
Actually the parent element only needs to be positioned, which means absolute and fixed are also valid. Basically anything that isn't static.
Great answer, worked for my scenario too. In my case, the div with overflow:hidden had a position:relative attribute. Adding a position:relative to its parent fixed the issue.
88

Actually...

To hide an absolute positioned element, the container position must be anything except for static. It can be relative or fixed in addition to absolute.

Improve this answer

2 Comments

To anyone else that may still be encountering this issue: the child must be statically positioned, as far as I can tell. Setting position:relative to both the parent and child doesn't work.
dude, that was a game-changer. a fixed one.
22

Evidently, sometimes, the display properties of parent of the element containing the matter that shouldn't overflow should also be set to overflow:hidden as well, e.g.:

<div style="overflow: hidden"> <div style="overflow: hidden">some text that should not overflow<div> </div>

Why? I have no idea but it worked for me. See https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ignore the sniping at stackoverflow!)

Improve this answer

Comments

9

In addition to provided answers:

it seems like parent element (the one with overflow:hidden) must not be display:inline. Changing to display:inline-block worked for me.

.outer { position: relative; border: 1px dotted black; padding: 5px; overflow: hidden; } .inner { position: absolute; left: 50%; margin-left: -20px; top: 70%; width: 40px; height: 80px; background: yellow; }
<span class="outer"> Some text <span class="inner"></span> </span> <span class="outer" style="display:inline-block;"> Some text <span class="inner"></span> </span>

Improve this answer

12 Comments

sorry this doesn't make sense, how did you manage to have overflow with inline? also the documentation is clear : developer.mozilla.org/en-US/docs/Web/CSS/overflow the overflow applies only to block container
Sure it make sense. Try having position absolute child element with negative offset. You may make such mistake with inline by default elements such as LIs and SPANs
@TemaniAfif and Miloš Đakonović .. That is correct, that inline-block will, or any other block like display type, though in this case, where the element with overflow: hidden has float, it work also on inline elements.
when you add position absolute, the element become a block element so there is no inline involved here
@LGSon let's put your example then, but still not relevant to this question .. should probably be suitable in another question.
|
1

I did not get it. I had a similar problem but in my nav bar.

What I was doing is I kept my navBar code in this way: nav>div.navlinks>ul>li*3>a

In order to put hover effects on a I positioned a to relative and designed a::before and a::after then i put a gray background on before and after elements and kept hover effects in such way that as one hovers on <a> they will pop from outside a to fill <a>.

The problem is that the overflow hidden is not working on <a>.

What i discovered is if i removed <li> and simply put <a> without <ul> and <li> then it worked.

What may be the problem?

Improve this answer

Comments

1

Maybe u could just use de inherit property of cascading by using auto instead

<section style="overflow: hidden"> <section style="overflow: auto">text within overflow<div> </section>

In that way, the inner section could display besides the parent elemment

Improve this answer

1 Comment

In my case, I had a <span> element with overflow: hidden that was displaying the overflow way past its padding. The fix was to remove the padding from the <span>, wrap the <span> in a parent <div> and apply the padding to the parent <div>.
0

This worked for me

<div style="display: flex; position: absolute; width: 100%;"> <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </div> </div>

Adding position:absolute to the parent container made it work.

PS: This is for anyone looking for a solution to dynamically truncating text.

EDIT: This was meant to be an answer for this question but since they are related and it could help someone on this question I shall also leave it here instead of deleting it.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.