33

I've got an absolutely positioned div I'm working with, and I put some text inside of it just to be able to find it on the page, namely:

<div style="position:absolute; top:10px; left:500px; font-size:30px; ">Example Text </div>

The text ends up wrapping, i.e. "Example" and "Text" are on a different line. There are no scroll bars showing in my Firefox browser, in fact it's width is about 1000px. Does one have to set a width on divs? Don't they expand to hold their content?

In case it helps, I included the Firebug CSS output for this element here:

element.style {
      font-size: 30px;
      left: 500px;
      position: absolute;
      top: 10px;
}
html * {
    margin: 0;
}              //  main.css (line 1)

Inherited from body:

body {
    color: #333333;
    font: 11px verdana,arial,helvetica,sans-serif;
}

Thanks

Ray
  • 5,885
  • 16
  • 61
  • 97
  • I cannot recreate this issue. Can we see the rest of the code? Does this position place this DIV near to another item causing the text to wrap? – Yeodave Sep 07 '11 at 16:26

8 Answers8

100

Try adding:

white-space: nowrap;

in your fixed positioned div. Beware, though, that this solution will not cause the lines to wrap when the div is smaller than the window's width.

Spiros Martzoukos
  • 1,171
  • 3
  • 8
  • 8
27

Block-level elements expand vertically to hold their content, but expand horizontally to fill their container. Since you're using absolute positioning though, the semantics of "filling the container" change a bit.

Normally browsers will attempt to fill the remaining horizontal space of the browser if the width hasn't been specified (or when width is 'auto', the default width), so what you're describing sounds peculiar. It seems most likely that something else is interfering with the element to cause that behavior (e.g., a relatively or absolutely positioned element somewhere in the parent chain).

I would try to debug this by seeing if you can replicate the behavior with a root-level div (if you're not already), to eliminate the chance of parent elements causing issues.

jmar777
  • 38,796
  • 11
  • 66
  • 64
  • 1
    Jmar, thanks for your explanation. I do have a relatively positioned div in the parent chain. Reason, I want this absolute div to be positioned on the page at an offset to that content. Perhaps I'm not doing positioning correctly? I've got stuff that I want to be displayed using normal and floating positioning, and then in the same group of stuff (read div), I have something I want to appear as an offset to that (without using margins, etc) – Ray Sep 07 '11 at 16:34
  • It's hard to provide more specific advice w/out seeing the full parent chain, but to take a stab, does it appear that the text is wrapping due to the width of the relatively positioned parent div? If so, you can do some hacky stuff with negative margins to exceed that div's boundaries, but you may be better off reconsidering the overall DOM structure you're using. – jmar777 Sep 07 '11 at 16:41
  • If I get rid of the relative positioning of the parent element, then I don't get the wrap of the words. However, this element then becomes offset from the browser 0-0 point, which is not what I want. I.e. I've got a header on the page with menu below it that's repeated on every page. I want to do absolute positioning "relative" to that stuff, so that the element positions correctly, even if the "header material" is changed. – Ray Sep 07 '11 at 16:46
  • 1
    Due to that structure, you're going to need to use an explicit width then. If you don't use an explicit width (e.g., 300px), then the width will be determined by the container. Since the container seems to be necessary as an offset container, there will be no way to set the width of the absolutely positioned div based on the width of the browser. You could of course dynamically resize it with the help of some JavaScript, but that's kind of nasty if it can be avoided. – jmar777 Sep 07 '11 at 16:57
  • 1
    For people looking for a visual help for this issue, you can see this pen: https://codepen.io/khs/pen/vemJEx From what I found, if you want to nest a *table-like* structure within an absolutely positioned element and want the absolutely positioned element to expand, it's better to use a table rather than a flex-box. Of course, use `white-space:nowrap` if you want, but it won't help you if you're using flexboxes. – kumarharsh Sep 28 '17 at 08:40
22

On the absolutely positioned element, add:

display: table;

.rel {
  position: relative;
  background-color: rgb(85 85 85 / 20%);
}

.abs {
  position: absolute;
  background-color: rgb(0 255 0 / 50%);
}

.table {
  display: table;
}

.fixed {
  position: fixed;
  background-color: rgb(3 169 244 / 46%);
}

div {
  font: 14px italic, sans-serif;
  border-radius: 5px;
  margin: 1em;
  padding: 1.5em;
  font-style: italic;
  border: 3px solid rgba(155, 155, 155, .4);
}

p {
  font-style: normal;
}
<div class="rel">(Relative Positioning)
  <div class="abs table">(Absolute Positioning; Display "table")
    <div class="fixed">(Fixed Positioning)<br/>
      <strong>Self-Sizing Popout Content</strong>
      <p>The width of this block expands based on content size, and escapes the bounds of its parent, yet its starting position is based on its location in the containing parent. This method of positioning can be used for popups that need to be anchored
        in a particular spot. </p>
      <div class="rel">(Relative Positioning)
        <div class="abs table">(Absolute Positioning; Display "table")<br/>
          <div class="fixed">(Fixed Positioning)
            <p><strong>
Now we're getting ridiculous
</strong><br/> A popup in a popup.<br/> This box expands based<br/> on content height &amp; width.
            </p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
Benson
  • 4,181
  • 2
  • 26
  • 44
  • This worked for me, while `white-space: nowrap` didn't. – kmoser Jan 23 '16 at 06:29
  • 1
    This doesn't work if there is a parent element with `position:relative`. The max auto width of the table will be that relative element's width. – Steven Vachon Jul 25 '16 at 20:32
  • 1
    If the parent position is relative, you'll need to enclose the auto-expanding content in a div with fixed positioning (works only because ancestor is relative and parent is absolute). For example:
    My auto-sized content
    See proof of concept at: https://jsfiddle.net/bensontrent/qq2ahmf2/     – Benson Jul 27 '16 at 22:35
  • This works perfectly in WebKit and IE browsers... but doesn't seem to work on Firefox. – kayee Oct 19 '17 at 20:10
  • 1
    @Benson, You're a life saver! – Christopher Bradshaw Aug 15 '19 at 22:38
  • @Benson: but then the content doesn't move around anymore. – Clément May 13 '20 at 21:58
  • @Clément, your absolutly-positioned element must be a child of a relative element...see the proof at jsfiddle.net/bensontrent/qq2ahmf2 – Benson Sep 29 '20 at 08:33
  • My response was to your suggestion to use `fixed`: the problem with that is that the `fixed` won't move with the surrounding page when you scroll the page. Check out https://jsfiddle.net/oruszhy2/ : I added a large margin on the bottom of the rel block to get scrollbars on the page body, and scrolling moves the `rel` block away but not the `fixed` popups. – Clément Nov 06 '20 at 17:07
5

Try css property "width: fit-content;" or "width: max-content;" It allows content to expand horizontally.

Zvezdochka
  • 1,128
  • 12
  • 8
0

I have this solution for that:

<style>

html * {
        margin: 0;
    }     

    body {
        color: #333333;
        font: 11px verdana,arial,helvetica,sans-serif;
    }

    #a1{
        position: relative;
        margin:10px;
        border:1px solid black;
        overflow:hidden;
    }

    #a1 img{
            max-width:700px;
    }

    #a2{
        position: absolute;
        right:5%;
        bottom:5%;
        border:1px solid white;
        color:#fff;
        font-size:2em;
        background:rgba(0,0,0,0.7);
        padding:10px;
    }
</style>
<div id='a1'>
        <img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />

     <div id='a2'>
            <div>Your Text is flexible width</div>
            <hr/>
            <div>other text here</div>
        </div>
    </div>

http://jsfiddle.net/2hynguq9/2/

flexible text width ajustable to the div, enjoy

Aztek4
  • 11
  • 3
0

It actually works fine for me. But try adding display: inline; to the div.

Trent
  • 4,208
  • 5
  • 24
  • 46
cycero
  • 4,547
  • 20
  • 53
  • 78
  • Cycero, thanks for your response. I added "display:inline" and it had no effect. Please see comment I added to @jmar777 – Ray Sep 07 '11 at 16:36
-1

I solved this by adding a wrapper div that is also absolutely positioned, with the width I want my div to expand up to.

E.g.,

<div class="wrapper">
    <div class="my-div"></div>
</div>

And css,

.wrapper {
    position: absolute;
    width: 500px;
}

.my-div {
    position: absolute;
    whitespace: pre-wrap;
}

You can add whitespace: pre-wrap to allow wrapping lines, which makes this more flexible than the nowrap solution.

jahooma
  • 653
  • 7
  • 7
-2

Try using the css attribute of "width:auto" on the div :)

Graeme Leighfield
  • 2,825
  • 3
  • 23
  • 38
  • width:auto has no effect, but I can add width:100% to do it. But I'm trying to understanding how div widths work. – Ray Sep 07 '11 at 16:40