I am currently designing a website and what we want to have is the body of the text in a column, with occasional links and comments to the side of it (something many books do it). This could be easily done using a table with two columns, one containing the text and the other the links, properly spaced. However, I am also using a custom content framework that basically takes just pure text with minimal metadata and formats it onto the page. I would like to avoid having this text have <tables> in them, as it goes against the idea of separating content from presentation and makes it significantly harded for others to edit the text without screwing up the formatting (not to mention getting the side links to show at the correct height to match the text is also bound to get easily screwed up). So basically, what I want is to be able to have my side links be pushed to the side of the text in a really simple manner, preferably by simply putting them in a div with some css formatting. An obvious choice seems to be "float: right" but it doesn't push whatever is enclosed to the side of my text column: I tried playing with a few things but it doesn't work. Float-right makes the side part of the columne, not separate (see above) and position: relative creates a space form main column where the side link goes. Combination of the two also creates some wacky results. And doing position: absolute makes it a hassle to position the side panel especially since my main fixed-width column is in the center of the page (so if someone stretches the window it all goes to hell). Any idea how I can go about doing this?

The span containing TEST LINK is to the right of the word "of":

Thanks Merlin but I already tried that. As I mentioned, my side is aligned to the center of the screen (left-margin: auto; right-margin: auto;) so doing absolute position + left wont cut it as it depends wholly on how wide the browser window is, and I don't want to use &#106avascript to keep adjusting that.

Quote:Original post by Koobazaur
Thanks Merlin but I already tried that. As I mentioned, my side is aligned to the center of the screen (left-margin: auto; right-margin: auto;) so doing absolute position + left wont cut it as it depends wholly on how wide the browser window is, and I don't want to use &#106avascript to keep adjusting that.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>You should post some sample code, then.<br><br>

I didn't post source since I am willing to redo stuff to make it work. Anyway, here's it stripped to basics:

How about something like:

.sidelink {  display: block;  width: 100px;  float: right;  margin-right: -100px;}

That last line should ensure that the sidelink doesn't stay in the text but moves to the right. You could even add a "padding-right: 100px;" to the #content div to make room for the sidelinks.

Note: I haven't tested this.

Oh my god Sander... IT WORKS. I tried everything except going into negatives!

It works, but of course, not on mothereffing IE >< it just doesn't show. well, it shows if I give my content div padding on the side, but IE handles it differently from firefox. argh, I hate web development exactly because of this crap

That's a pretty cool idea, and effect. Here's a version that works on IE and Firefox, but not exactly the same:

Yesssss, it works like a charm! Thanks you guys are awesome :D

Quote:Original post by Koobazaur
Yesssss, it works like a charm! Thanks you guys are awesome :D

If you get something working in IE and Firefox that are close to the same, please post it here. I would like to see what you come up with.