position absolute can it also wrap text?

[sniperman]

I was just curious. I am doing a minor fix with a Twitter widget and externalized the code to clean it up a bit. The widget is wrapped in a DIV and I've placed this DIV underneath the H1 tag and floated it to the right to give it a nice position.

The problem is that because the code is in the content section, it can easily be deleted in a HTML editor.

So I decided to place the code at the bottom of the content DIV and styled it with

<div id="twitter" style="padding:0 0 10px 10px;margin-top:2px;top:50px;right:30px;float:right;position:absolute;">
            <script src="http://widgets.twimg.com/j/2/widget.js"></script>
			<script src="twitter-config.js"></script>
            </div>

Maybe some superfluous CSS i know.
This works. The only issue now is getting the content's text to wrap around.
The limitation is that other people will need to use a simple online HTML editor so it can easily be edited out.

Thanks in advance.

[jscheuer1]

In general, yes - if you specify a width.

[auntnini]

Help me out here. . . . I'm doubting myself. But I do not think you can FLOAT an absolutely positioned element. Am I wrong?

position: ABSOLUTE; Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.

[jscheuer1]

You can, but it generally has no effect. I didn't think that was the question though. If, as I think sniperman was asking, you want the text in an absolutely positioned element (any block level element really) to wrap, it must have a width constraint. With elements in the flow of the page that often happens as a result of the containing and/or adjacent element(s). With those out of flow (fixed, absolute, often float), often the only way is via explicit width as I mentioned.

[auntnini]

I would like to see Sniperman's results.

To me "FLOAT" (compared to "align") is a sloppy aspect of CSS. I know floated element has to have a width, the parent element of floated elements should also be floated, other elements should wrap around floated/aligned elements, etc. But, for the life of me, I cannot visualize floating an element with position: absolute (which takes element out of normal HTML flow of document). See attached screen shot (the code of which is below).

<div style="position:relative; margin: 20px auto;">
<p style="background: silver; margin: 20px;">I was just curious. I am doing a minor fix with a Twitter widget and externalized the code to clean it up a bit. The widget is wrapped in a DIV and I've placed this DIV underneath the H1 tag and floated it to the right to give it a nice position. The problem is that because the code is in the content section, it can easily be deleted in a HTML editor. So I decided to place the code at the bottom of the content DIV and styled it with </p>

<div style="float:left; width: 300px; position: relative; 
padding:5px;margin-top:5px;top:5px;left:5px; border:thick #0C9 inset;">
<h1 style="float:left; width: 95%;">This is relative "parent" FLOATED.</h1>
       <div style="float:left; width: 287px; position:absolute; 
        padding:2px; top:145px; left:8px; 
        border:thick #0C9 inset; height: 98px;">
       <h2 style="float:left; width: 95%;">This is absolute "child" 
        of relative "parent" FLOATED.</h2>
        </div>
</div>

<p style="background: yellow; margin: 20px;">I was just curious. I am doing a minor fix with a Twitter widget and externalized the code to clean it up a bit. The widget is wrapped in a DIV and I've placed this DIV underneath the H1 tag and floated it to the right to give it a nice position. The problem is that because the code is in the content section, it can easily be deleted in a HTML editor. So I decided to place the code at the bottom of the content DIV and styled it with </p>

<div style="float:right; width: 300px; position:absolute; padding: 2px; margin-top:2px; top:10px; right:20px; border:thick #ff0000 inset;">
<h1 style="float:right; width: 95%;">This is absolute "parent" FLOATED.</h1>
       <div style="float:right; width: 200px; position:relative; 
       padding:2px;top:20px; right:30px;
       border:thick #ff0000 inset;">
       <h2 style="float:right; width: 95%;">Relative "child" 
      of absolute "parent" FLOATED.</h2>
      </div>
</div>

<p style="background: silver; margin: 20px;">I was just curious. I am doing a minor fix with a Twitter widget and externalized the code to clean it up a bit. The widget is wrapped in a DIV and I've placed this DIV underneath the H1 tag and floated it to the right to give it a nice position. The problem is that because the code is in the content section, it can easily be deleted in a HTML editor. So I decided to place the code at the bottom of the content DIV and styled it with </p>

<!--<div style="float:left; width: 300px; position:relative; 
padding:10px;top:100px;left:10px; border:thick #ff0000 inset;">
<h1 style="float:left; width: 95%;">This is relative "parent" FLOATED.</h1>
<div style="float:left; width: 200px; position:absolute; padding:10px; margin-top:200px; top:-41px; left:30px; border:thick #ff0000 inset;">
<h2 style="float:left; width: 95%;">This is absolute "child" of relative "parent" FLOATED.</h2>
</div>
</div> -->

<p style="background: yellow;">I was just curious. I am doing a minor fix with a Twitter widget and externalized the code to clean it up a bit. The widget is wrapped in a DIV and I've placed this DIV underneath the H1 tag and floated it to the right to give it a nice position. The problem is that because the code is in the content section, it can easily be deleted in a HTML editor. So I decided to place the code at the bottom of the content DIV and styled it with </p>

<!-- <div style="float:right; width: 300px; position:absolute;
padding:10px;top:50px;right:30px; border:thick #00ff00 outset;">
<h1 style="float:right; width: 95%;">This is absolute "parent" FLOATED.</h1>
<div style="float:right; width: 90%; position:relative; 
padding:10px;margin-top:100px;top:60px;right:30px; border:thick #00ff00 outset;">
<h2 style="float:left; width: 95%;">This is relative "child" of absolute "parent" FLOATED.</h2>
</div>
</div> -->

<p style="background: #6FF;">I was just curious. I am doing a minor fix with a Twitter widget and externalized the code to clean it up a bit. The widget is wrapped in a DIV and I've placed this DIV underneath the H1 tag and floated it to the right to give it a nice position. The problem is that because the code is in the content section, it can easily be deleted in a HTML editor. So I decided to place the code at the bottom of the content DIV and styled it with </p>
</div>

I've been trying to research float/absolute. Here are some of my notes from Eric Meyer's © 2007 book CSS: The Definitive Guide on CSS2:

CSS float property [float: left right none inherit] can be applied to any element. ... In some ways, floated element is removed from normal flow of doc. Although it still affects layout, it almost exists on its own plane. Other elements flow around it. Margins around floated elements do not ;collapse.'

Must declare width for 'non-replaced' floated element or element's width 'will tend toward zero\o.'

Float parent ... "A floated element will adjust to contain any floated descendants."
...
Absolutely positioned element's placement and sizing are related ... [position: absolute; top: 1em; left: 1em; right: 25%; bottom: 10px;]

Because 'replaced' elements (e.g., <img>) have an intrinsic height and width, their positioning rules are different from 'no0-replaced' elements.

[jscheuer1]

As I said as regards floating an absolutely positioned element:

You can, but it generally has no effect.

I can't think of anywhere it would have an effect. Perhaps there are none. But knowing browsers - I'm pretty sure there's some version of some browser where there would be some effect.

In just about any browser though, one could assign both float and absolute position to an element. Later, via javascript, you could change the position to static or relative. The float would then become manifest. Some kind of effect could be achieved this way.

I don't think float is sloppy compared to align, fuzzy perhaps. Either can have unexpected consequences upon contained elements, though float less so I think. Fuzziness is really a feature of floats, they allow the content to flow as it might need to at various resolutions/viewport sizes. A float doesn't have to have a floated parent, nor 'should' it necessarily. You don't have to specify a width for a float if it has intrinsic width (like an img, span, or a tag), almost anything inline.