Take the 2-minute tour ×

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children.

But it also has another interesting feature when combined with margin: auto...

If PREVIOUS sibling is a floating element, it will actually appear juxtapose to it. That is if the sibling is float:left then the container with float:none overflow:hidden will appear to the right of the sibling, no newline - just as if it was floating in the normal flow. If the previous sibling is float:right then the container will appear to the left of the sibling. Resizing this container will accurately show it centered inbetween the floating elements. Say if you have two previous siblings, one float:left the other float:right, the container will appear centered inbetween the two.

So here's the problem...

How do I maintain that type of layout WITHOUT masking children?

Googling all over the web gives me ways on how to clear:both and expand a container... but I can't find any alternative solution to maintaining the left/right previous-child centering. If you make the container overflow:visible then the container suddenly ignores the layout flow of the floating elements and appears layered ontop of the floating element.

So question:

I have to have the container overflow:hidden to preserve layout...

how can I make it so the children aren't masked? I need to have the child absolutely positioned relative to the parent outside the container.


How do I overflow:visible so I can absolutely position a child relative to the parent outside the container... YET preserve the sibling float-like-layout-flow?

share|improve this question
add comment

3 Answers

up vote 21 down vote accepted

You can use the clearfix to do "layout preversing" the same way overflow: hidden does.

.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
.clearfix:after {clear: both;}

add class="clearfix" class to the parent, and remove overflow: hidden;

share|improve this answer
Hmm! Clever, I am just now experimenting with it. What I am currently getting is that the generated content behaves correctly, being preserved in the flow of the layout, however the parent will still ignore it and layer ontop of the floating elements. However, this is a very good idea and I will play with it more to see if I can get it to behave correctly, and comeback to vote. Thank you :). –  marknadal Jan 29 '12 at 10:39
This is awesome, fixed my issue completely, and @marknadal should come in and rate this as the fix, hint hint! :) –  Mason G. Zhwiti Oct 25 '12 at 17:51
@Frexuz please show us some demo. I tried but unable to get it. –  Praveen Jul 17 '13 at 9:52
@Frexuz I'm not able to get it jsfiddle.net/ewNbu –  Praveen Jul 17 '13 at 10:59
@user1671639 your example doesn't really apply for a clearfix. You need something else, so I suggest you post a question with your problem. –  Frexuz Jul 17 '13 at 14:31
add comment

This is an old question but encountered it myself.

I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")

If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.

If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.

share|improve this answer
Here is a crappy example just post into a html file to view. <code><div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;"> <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div></div> </div> </code> –  Thomas Davis Jan 19 '11 at 5:45
Thanks for trying to answer, but this doesn't work because fixed position automatically positions the element relative to the viewport, meaning it does not move with the parent. In fact, if you have a scrolling page, it'll stay at 10px,10px as you scroll. –  marknadal Jan 20 '11 at 8:42
add comment

Neither of the posted answers worked for me. Setting position: absolute for the child element did work however.

share|improve this answer
But wouldn't the parent DIV mask it out if it went beyond the boundaries of the parent DIV (which has overflow:hidden)? –  marknadal Jul 15 '12 at 18:16
Afaik it doesn't, as long as the parent does not have position:relative. Then the child is positioned relative to its first positioned (not static) ancestor element, taking it out of the regular (parent's) dom flow. –  Pim Schaaf Jul 2 '13 at 13:47
add comment

protected by Community Oct 10 '11 at 13:56

