CSS div

[g0ste]

Hello,

I am trying to achieve a certain effect that involves two divs. One is nested inside the other, positioned absolute inside of a relative positioned div.

My basic problem is the content in the "content" div does not go around the "nav" div (this is the nested div positioned absolutely within the content div). The "nav" sits on top of it and makes it impossible to read.

I have read something about "line boxes" but found very little when I researched this.

The goal is to have the content within the "content" div wrap around the "nav" div.

It's probably just easier if you look at it, so here it is. The site can be found here and my CSS can be found here

[!]IE users be warned[/!] This is not yet developed for IE - only for Firefox. My aim is to make it work on Firefox first then iron out the IE bugs.

I would appreciate if anyone can tell me what I am doing wrong, or point me in the direction of any reading about this topic.

Thanks for your time!

Dan

________________________________
Top 10 reasons to procrastinate:
1)

 

[g0ste]

AWW crap! forgot to write a proper subject. stupid me

________________________________
Top 10 reasons to procrastinate:
1)

 

[SilverBean]

I just made a post about Percents not working in IE 6. I've been putting in some long nights. You may want to monitor my post to see if anybody offers anything constructive as to whether I have a problem or found a bug or something else. It's very closing related and might be a div thing so your post caught my eye.

I checked it out and I'll make some quick comments before I hit the sack. I saw same under NN 8 and IE 6. I think(?) I see your pain. I guess you want your NAV menu (i.e., Home, ehtos, The House etc.) to be in the middle of your text or copy.

I'm all for the creativity aspect of this stuff I think it has the potential for a nice effect. I was diving into this flow stuff when I was looking at my issue and I can tell you that stuff just scares me. Then you throw in the different browsers into the mix and I'm terrified. I think your very brave to start off with FF. I've found that to be the most forgiving so I start with IE and if that looks ok usually FF is accomadating.

If you really want to go in this direction I would force the menu into the middle of the copy. Use 3 div containers (top, middle, and bottom). Top is for some copy above, middle is for the nav menu, and bottom is for some copy below. This really doesn't help you for making it look like the copy flows around the Nav menu. You might be able to do something fancy with the middle container to simulate that effect. Maybe go with 5 containers 1 long one on top, 3 in the middle, 1 long on on the bottom, and manually put the text into whatever container it should be in for readability.

My "real" suggestion is to seperate out your Nav Menu, and copy. Let folks read if they want to read, Nav if they want to Nav. I'm not sure what the application is for money or just looks. If for money I would definitely recommend, if for looks well that's a judgement call on what the best use of your time is.

 

[g0ste]

Hi SilverBean,

Thanks for your reply. The nav is supposed to be bottom left of the containing div.

I just found out lastnight (late zzz), that if you wrap an image in a div layer, the text will flow around the div.

So over the course of the day, I have been thinking, and came to the conclusion of creating two divs in the containing element ("content"). One will contain a plain image that happens to be the same dimensions as the "nav" element. The nav layer will sit at the same coordinates as the element that contains the image via absolute positioning.

This should give the impression that the text is flowing around the nav layer (but it's really flowing around the image).

It's a bit of a sloppy workaround, but I guess it will do.

Of course, all this is theory in my head, so hope it might not even work. Will let you know later

Cheers

Dan

________________________________
Top 10 reasons to procrastinate:
1)

 

[Vragabond]

What you're trying to achieve will be extremely difficult. As I have said many times, absolute positioning is taken out of the flow of the document and just floats on top of the normally flowing content. So, absolute positioning won't work for you as you will have no way of knowing how much area to cover. Sure, you could put a dummy image there to work it out, but think about users making your font larger, because they can't read it.

I would suggest re-thinking the position of your menu. If you opt to put it on the top on the left side of text, it will be a simple matter of floating it. To have it where you want to without any scripting involved, absolute positioning is the only way and as you know that will cause problems.

Nice location for a house though.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[traingamer]

Simply float the navigation div and forget about absolute and relative positioning. The text will flow around the floated area. You can only float it left or right, though. Floating to the center is still out of the question.

Isn't that what you're really asking?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill