Make child visible outside an overflow hidden parent

Question

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   OR  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

User · Answer

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

User · Answer

You can use the clearfix to do  layout preserving  the same way overflow  hidden does    clearfix before   clearfix after       content               display  block          height  0          overflow  hidden      clearfix after   clear  both     clearfix   zoom  1       IE  lt  8      add class  clearfix  class to the parent  and remove overflow  hidden

User · Answer

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   Here is a crappy example just post into a html file to view     lt div style  background   ff00ff  overflow  hidden  width  500px  height  500px  position  relative   gt       lt div style  background   ff0000 position  fixed  top  10px  left  10px   gt asd          lt div style  background   00ffff  width  200px  overflow  visible  position  absolute  visibility  visible  clear both  height  1000px  top  100px  left  10px   gt  a lt  div gt       lt  div gt   lt  div gt

User · Answer

For others  if clearfix does not solve this for you  add margins to the non-floated sibling that is are the same as the width s  of the floated sibling s

[css] Make child visible outside an overflow:hidden parent

Examples related to css

Examples related to overflow

Examples related to css-float

Examples related to center

Examples related to hidden