Floating div's, li and margins

[quiffhanger]

Can anyone explain this behaviour to me? I would've called it a bug but it seems to occur in all browsers I've tried.Here's a small demonstration (description below): http://flat5.org/test.htmlWhen placing paragraph text and a list to the right of a floating div (i.e. a common way to have a menu) the list text has the same margins as the paragraph text. Sounds fine? No! This results in the bullet points themselves, usually a couple of em's further left floating somewhere inside you div! In some browsers, particular if you div has in image in it, this results in invisible bullet points, in others it just "looks weird".So, presuming this is designed behaviour, what's the proper way to sort it out! It's actually quite hard for me to nudge stuff around as appropriate as I've got a lot of lists, only some of them next to a floating div, depending on screen size! I'm also working within a cms so fiddling with the html can be a bit tricky.

[boen_robot]

I think this is a right behaviour. If you want, you can set a bigger margin on the div, or set a margin on the list itself. If you want the bullets removed, simply use list-style:none;.

[quiffhanger]

I think this is a right behaviour. If you want, you can set a bigger margin on the div, or set a margin on the list itself. If you want the bullets removed, simply use list-style:none;.

But the problem is it's inconsistent: no matter how big a margin I set on the div, the bullet points will still be further left than the paragraph text. However, when the list isn't next to a div, the bullet points are indented _more_ than the paragraph text. I suppose I could give the li tags a margin, but then when they're not next to a div they will have a really big margin and look daft. As I mentioned, due to text wrapping on different screen sizes I dont know if my list is going to be next to a div or not...

[boen_robot]

I think I'm starting to see your point. How about you put the list and the paragraph in their own div? That way, indention should be applied relatively to the div, not the body. If simply wrapping it doesn't work, try to also set some dimensions on it.

[quiffhanger]

How about you put the list and the paragraph in their own div? That way, indention should be applied relatively to the div, not the body. If simply wrapping it doesn't work, try to also set some dimensions on it.

Been fiddling with this. If I put the main text in a div, margin's and padding are always applied relative to the edge of the screen, not relative to the div so they are ignored unless they are bigger than the div itself.I'm wondering if my problems are due to my lack of understanding the css "position" property. I've tried playing with it a bit but to no avail.I've been updating http://flat5.org/test.html with my attempts, feel free to take a look.

[quiffhanger]

For the benefit of everyone:Didn't manage to solve it properly. In the end I just gave all LI tags an extra 3em margin. The downside is that when not next to a floating div, the list items appear an extra 3em's indented than they would normally.Also caused a problem if you use lists when real estate is at a premium: for this I created an extra class li.nomargin (margin-left: 0px;} to scrap the extra margin.All a bit ugly, but there you go...-rossP.S. I used Gobby with boen_robot to explore the problem a little bit - it's a very cool app.