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!

@HonoreDoktorr That was just a mistake when changing the class names for here. — Danny, May 06 '15 at 20:37
@isherwood This doesn't allow for the fluid width to leave the bounds of the parent element still, if my tooltip is bigger than 100px, the text will carry on outside of the element but the actual width of it will still be inside. — Danny, May 06 '15 at 20:38
I was guessing. I don't really understand your scenario. Maybe a demo? http://jsfiddle.net — isherwood, May 06 '15 at 20:40
@isherwood sorry if I didn't explain enough, take a look at the example provided in Honore Doktorr's answer, it has fixed my issue, but I need the element to be displayed central, so the element should be evenly outside each left and right of the parent div. — Danny, May 06 '15 at 20:49

score 84 · Accepted Answer · edited May 23 '17 at 12:25

84

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

edited May 23 '17 at 12:25

Community

1
1

answered May 06 '15 at 20:39

Honore Doktorr

1,397
12
20

Thank you, this works in terms of the width, but now my element is no longer centered inside the parent unfortunately! – Danny May 06 '15 at 20:42
1

You can use `margin-left: -50%` for that (and not do the `margin: 0 auto`, that won’t center absolutely positioned blocks), although there are clipping issues when `.parent` is on the left side of the page. See http://jsfiddle.net/xkok9v4p/2/ for an example. – Honore Doktorr May 06 '15 at 20:49
@isherwood is actually right, my second example only *seems* to work b/c of the length of my example tooltip but this one does not: http://jsfiddle.net/xkok9v4p/4/ – Honore Doktorr May 06 '15 at 21:02
@isherwood Put that as an answer, exactly what I needed, works perfectly thank you! – Danny May 06 '15 at 21:03
I added it to this answer. – isherwood May 06 '15 at 21:06
2

While this does allow for "natural" sizing it also prevents the natural flow of content within the div. The answer below allows things to display as usual but with full natural sizing and layout. – StephenRios Mar 06 '18 at 16:05

Joe Koker · Answer 2 · 2020-03-14T23:03:30.233

I believe the best solution for this issue is not setting left, right or white-space: nowrap but we have a new value for width property max-content... so just add the width: max-content;(this one works with max-width as well)

demo: http://jsfiddle.net/qLgw8bxu/

support: https://caniuse.com/#search=max-content

.tooltip {
 background-color: blue;
 position: absolute;
 text-align: center;
 padding: 5px 10px;

 width: max-content;
}

Steven Vachon · Answer 3 · 2016-03-17T17:41:48.320

4

If .parent can be made inline, you could make .tooltip render as a table and it will autosize to fit its contents, but unlike with the use of white-space:nowrap, it would also support a max-width.

.parent {
  display: inline;
  position: relative;
}

.tooltip {
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  text-align: center;
  padding: 5px 10px;
  max-width: 200px;
}

edited Mar 17 '16 at 17:41

answered Mar 17 '16 at 17:34

Steven Vachon

3,168
1
21
29

it is perfect, awesome like max-width – dannyliu Jul 12 '20 at 03:48

score 1 · Answer 4 · edited May 06 '15 at 20:55

1

I haven't seen this problem before, but what I think is going on, is that width: auto; automatically inherits the properties of its parent. So either you have to put a number in (width: 50px;) or a percentage (width: 50%).

edited May 06 '15 at 20:55

isherwood

46,000
15
100
132

answered May 06 '15 at 20:35

Jasper van Amerongen

11
4

I want the width to be fluid based on its content, at the moment it cannot go any larger than 100px of the parent, the text carries on overflowing outside of it but the actual element width is only 100px – Danny May 06 '15 at 20:39

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

4 Answers4