Advanced Search

Results 1 to 6 of 6

Thread: position absolute can it also wrap text?

  1. #1
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    110
    Thanks
    15
    Thanked 1 Time in 1 Post

    Default position absolute can it also wrap text?

    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

    Code:
    <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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    In general, yes - if you specify a width.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    231
    Thanks
    32
    Thanked 24 Times in 24 Posts

    Default Float Absolute?

    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.
    Last edited by auntnini; 12-07-2010 at 09:13 PM. Reason: fear of offending

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (12-03-2010)

  6. #5
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    231
    Thanks
    32
    Thanked 24 Times in 24 Posts

    Default Still trying to visualize this

    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).

    Code:
    <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.
    Last edited by auntnini; 12-04-2010 at 01:49 AM.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    As I said as regards floating an absolutely positioned element:

    Quote Originally Posted by jscheuer1 View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (12-06-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •