div with unspecified width (absolute positioning)

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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>