CSS Positioned Absolute Element, automatic width outside of parent's bounds?

Question

So, I have my parent element positioned relative, in order to allow a tooltip element to be positioned absolute inside, at the top of it. I am aware that you are required to add "left: 0, right: 0", so that the width of the element is still able to be set to auto, which I have done. However, my parent element has a fixed width, which the tooltip becomes restrained to, so the auto width cannot go outside of it, is there any way around this?

CSS:

.parent {   position: relative;   width: 100px;   height: 100px; }  .tooltip {   position: absolute;   top: 0;   left: 0;   right: 0;   margin: 0 auto;   text-align: center;   width: auto;   padding: 5px 10px; } 

Elements:

<div class="parent">   <div class="tooltip">Text goes here</div> </div> 

No JS please, looking for a CSS solution, thanks!

Answer 1

Not setting both left and right on .tooltip, and setting white-space: nowrap should do it:

.tooltip {   position: absolute;   top: 0;   left: 0;   margin: 0 auto;   text-align: center;   width: auto;   padding: 5px 10px;   white-space: nowrap; } 

Working example.

You'd need to use this solution to center an absolute element. It does require an additional element, though. Demo