How to do margin notes with css [problems with overlaping]

I want to implement margin notes with CSS. I want small notes in the margin which are vertically aligned with the lines in the main content box. The problem is when the notes are longer or there are many of them - THEY OVERLAP! [or at least i did not find any solution so they do not]. If the note is long [compared to the content] i would like something like that:




I have been trying to find a solution myself and google the net, but unsuccesfully. There is a page about the problem at URL where you can find what i mean. Nevertheless at the bottom of the page they just say that the notes may overlap and give no solution to the problem.

Unitl now i have tried tricks with float [but IE does not support clear: very well], with negative margins, and with display:table-xxx. The latest one is a solution to some extend, but you must enclose your text in several divs to let it work. I would like the solution with clean html code, so ideally one could do something like:



or maybe [dt for notes, dd for text - looks strange, but quite ok for my pages]




I would prefer clean CSS solution [no tables], but the must is that it works in most browsers [Mozzila, Opera, IE, Netscape>ver4 at least].

Thank you very much for any ideas in advance ... I will test any new idea, I need just a hint.

i believe if you have a clear width definition in your css and/or wrap: virtual, it should not overlap out of the boundaries of your margins...

Sorry I do not understand exactly - I hope that you have understood my problem. The problem is not any kind of horizontal overlapping, the problem is overlapping of two notes, if the content of the first of them is too long. In all my solutions this is the last thing I should solve ... everything else works fine.

Please look at the link given in the first post - here you will SEE what is exactly my problem.

BTW: do you mean HTML wrap? or css?

Thanks for your answer anyway, I hope that I made myself clear now, or in case, that I just did not understand your answer, please elaborate on it little bit.

Thanks Jakub

oooo, ok, well, thats all based on how much you wanna write.
what id suggest is having a note thats too long to be displayed have a link on it that opens a mini window that contains the rest.

[[[terminal]]]

I believe floats are the path to take. IE does mess up, but that's expected of an obsolete, non-compliant, PoS browser. Moz and Opera do work nicely. I think with a little experimenting, that IE could be made to work right in the particular, if not the general case.

For the general case, with the IE screw-up, see my Margin notes test. For a page-specific hack for IE, see version 2.

Hope these examples will spark a solution for your page(s).

cheers,

gary

Thanks guys for your posts!!

But there are still problems, with the solution ...

I want this


but kk5st's solution gives this



In the terminology of kk5st's code, I would like to insert

<div class="clearing"> &nbsp; </div>

automatically after each "main" div [and again I do NOT want to add this to the source, because I consider anything which implies the neccesity of including a presentational information as a bad solution].

I tried to tweak the solution, so it works, but i dod not succeed. For example one can say that we will do the "main" class also floated to left. But than it is sometimes rendered UNDER the note, which is not good, we would need to put it a width: 100%-12em which is not possible, so we could for example put width:15% to .note and 75% to .main, but it makes width notes dependent on the size of the browser window, which looks ugly with narrover windows.

In fact I think that there is NO solution for the source coded as in kk5st's code - which was also my original intention and is the cleanest solution.

So I got he idea of the source code in this style:



which could quite fit the usage of notes at my pages. I thing, there could be solution for such a markup [I played with big margin of .section and big negative margin of .note, but I could not reach the solution either]

If there is no solution for this type of code, I am willing to add anothet div around the content of each section [excluding the note], but it would be the limit of what I think is reasonable.

Aby ideas on that?

PS: I think that IE might be obsolete, but as it is used by many users, the final solution should work with IE as well. But for the beginning it is ok to find the nonIE-compatible solution, which can be hacked later on.

My first trial, which Moz, etc. render correctly, if viewed in IE, gives the spacing you desire. Since most, if not all, printed matter do not add spacing in the main content to match margin notes or sidebars, I hacked a version that even IE would render properly (as I saw it). That was version 2.

Since you do want the breaks, I hacked another version that provides them. Even though you consider the use of clearing divs to be inelegant, it is a necessary hack for that PoS browser that 90&ndash;95% of the viewers use.

In a compliant world, one would simply style ".main br {clear: both;}" and use <br /> at the end of your content section. IE does not handle "clear" well. Since it does recognize a clearing div, that's what we must use. It isn't as elegant as a simple <br />, but it is not structurally or syntactically wrong.

cheers,

gary