Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    possible to flow text around absolute element?

    i have an absolutely positioned nested box. when using float the text warps around the element. when switch over to absolute the box lays on top of text, hiding what is underneath.

    is it possible to get text to flow around an absolute element the way it does around a float element?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry but making an element position: absolute also removes the element from the flow of the page content so the browser simply ignores that element as if it didn't exist as it places the rest of the page elements.

  • #3
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    gotcha. new to style sheets so i have yet to learn all those tidbits.


    acsii art of what i am trying to do:

    1|------------------------------------|
    2|                &n bsp;                                 &nbs p; |
    3|                &n bsp;          |-----------|     |
    4|-------------------|               |----|
    5                &nb sp;             |               |
    6                &nb sp;             |               |
    7|-------------------|               |-----|
    8|                &n bsp;          |              |  &n bsp;   |
    9|                &n bsp;          |-----------|     |
    0|                &n bsp;                                 &nbs p;|
    1|                &n bsp;                                 &nbs p;|
    2|                &n bsp;                                 &nbs p;|
    3|                &n bsp;                                 &nbs p;|
    4|                &n bsp;                                 &nbs p;|
    5|------------------------------------|


    all three boxes are enclosed within a position: absolute div box. the top box is a div as well as the middle box. the bottom box is a regular html table.

    how do i create the middle div so it lays on top of the other two elements, as shown in the art above, yet text wraps around it?
    Last edited by audiophan; 11-19-2002 at 05:42 PM.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd try to float it to the right and then use the right-margin to drag it back left to the point you want it. If the whole of the content if left aligned you may need to float it left and use the left margin instead.

  • #5
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think i tried that first but it didn't work. i'll try it again

  • #6
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    doesn't exactly work. here is why:

    if i do not place the table in a div element then the float box overlays the table in the same manner as when absolutely positioned. meaning what is underneath the box is not viewable.

    after setting <div> tags around the table it overlaps the nested float box.

    am i doing something incorrectly? new to css so i might

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can we see the code you've got so far?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, you can

    a) Make the first paragraph narrower (<p style="margin-right: 220px;">)
    b) Float a DIV in that paragraph to 'fake' the flowing...

    <div style="width:200px; height: 50px; float: right"></div><p>First, go to local....

    Of course, this method would require manually setting the height to match that of the floating layer...but it would work for the most part....

    Note: all pixel values I used are random, you should calculate what should be accurate for your page....
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #10
    New Coder
    Join Date
    Nov 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so right margins are useful after all! i'll try out those ideas. appreciate the help!


  •  

    Posting Permissions

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