CSS block positioning at end of paragraph
Question by Dibbeke
I am trying to transcribe some of Prof. Dr. Edsger Dijkstra’s EWD’s, but running into a little problem. In his writing he likes to place comments such as ‘End of Proof’ at the end of the paragraph, right aligned when there is room, or on the next line otherwise. I would like to recreate this formatting, but seem unable to do so. I’d really prefer a solution using only CSS, but if that proves impossible, JavaScript is also allowed.
Please see http://www.cs.utexas.edu/users/EWD/ewd10xx/EWD1001.PDF on page number 0 (2nd page of PDF) the comment “End of Legenda” and page number 3 (5th page of PDF) the comment “End of Remark”.
I’ve tried using the display: block / float: right combo which @starx answered with. However, as it is a float, it does not move the rest of the text down. Looking through the source document, the formatting seems ad-hoc, but it seems Dijkstra liked to keep it on the same line if possible, or move it to the next, right aligned, if not.
Searched through the different CSS specs, but I can’t as yet fathom a way to accomplish this.
Answer by JoeJ
My suggestion would be to use the :after pseudo-element to add the caption at the end of the appropriate paragraph:
.remark:after {
content: 'End of Remark';
color: red;
display: inline-block;
float: right;
}
Example: http://dabblet.com/gist/2406457
Answer by Starx
Assuming, you are giving class block to the element.
.block {
display: block;
width: 200px; /* minimum needed to be inline */
float: right;
}
