View Full Version : possible to flow text around absolute element?

11-19-2002, 05:38 PM
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?

Roy Sinclair
11-19-2002, 05:59 PM
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.

11-19-2002, 06:26 PM
gotcha. new to style sheets so i have yet to learn all those tidbits.

acsii art of what i am trying to do:

2|                                                   |
3|                           |-----------|     |
4|-------------------|               |----|
5                              |              |
6                              |              |
7|-------------------|               |-----|
8|                           |              |      |
9|                           |-----------|     |
0|                                                  |
1|                                                  |
2|                                                  |
3|                                                  |
4|                                                  |

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?

Roy Sinclair
11-19-2002, 10:15 PM
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.

11-20-2002, 07:08 PM
i think i tried that first but it didn't work. i'll try it again

11-20-2002, 07:29 PM
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

11-20-2002, 10:06 PM
Can we see the code you've got so far?

11-20-2002, 10:52 PM
sure thing:

example of what i don't want. (http://audiophan.curvedspaces.com/faqman/index.php?op=view&t=4) the nested box overlaps everything.

temporary solution: don't put much in the nested box (http://audiophan.curvedspaces.com/faqman/index.php?op=view&t=11)

11-20-2002, 11:31 PM
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....

11-20-2002, 11:35 PM
so right margins are useful after all! i'll try out those ideas. appreciate the help!