SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making content flow around a positioned div, not behind it

    Anyone know how to make content flow AROUND an absolute positioned div instead of flowing behind it?

    http://www.snug8.com/index.php

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i changed the template for a moment, but at anyrate, if you have an inline UL that has say 400 items in it and thena div tage absolute positioned in the middle of all that, my links run behind it, not around it. And I'm wondering if there is a fix for that?

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid that can't be done : because the div is AP, it's removed from the flow and other elements don't know it's there because for them the div doesn't exist. They don't interact with it.

    Try using float and position the div using margin and or padding.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. I'm trying the float and I can get it to the center of the page but the content will not flow around it. I must be hitting this from the wrong approach here.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,584
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, to get it to flow around the float you must not float the content you want to wrap it around.

    Aka if you have an <img> and you have a <p> text wrapping around it you could float the <img> but don't float the <p> .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, i'm not sure if i follow, but do you want the links flow around the searchwrapper?

    if so, float the wrapper left and give it the margins/padding you want. If you have enough content, it will flow around the wrapper.

    Just briefly tested locally in Opera .... i'm in a hurry for the moment
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,584
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Hi, i'm not sure if i follow, but do you want the links flow around the searchwrapper?

    if so, float the wrapper left and give it the margins/padding you want. If you have enough content, it will flow around the wrapper.

    Just briefly tested locally in Opera .... i'm in a hurry for the moment
    Yes that will work everywhere, assuming no double float margin bug is happening on the wrapper . That's the logic. Static content flowing around the floated element.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yes that will work everywhere, assuming no double float margin bug is happening on the wrapper . That's the logic. Static content flowing around the floated element.
    I'm assume the OP knows about that bug and also how to contain floats (for future reference)

    If not, the OP just can come back and get our input
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •