I have a little CSS conundrum.
I want to have a heading (H1 or H2) followed by some small and different coloured text on the same line. I can't do much manipulation of the headings because they are generated by a Wiki, but I can apply CSS to them as well if necessary.
So, I have got as far as something like:-
<html><div class="textright">  Text on right</div></html> <html><h1>Heading 1</h1><html>
with CSS:-
.textright { margin-top: 1em; margin-bottom: 0px; padding-bottom: 0px; float: right; }
This works to an extent, the 'Text on right' does appear on the same line as the H1 heading as I want. However it's right across on the RHS and I really want it nestled up against the H1 text.
Is there any reasonably easy way to get what I want? I'd really prefer not to have to make the heading 'float: left;' as this causes all sort of other fun and games, mainly because there's no easy way to 'clear: both;' afterwards. What I want is a box that occupies the whole width of the page the the right of the heading and then place the 'Text on right' within that box aligned to the left, but how do I get a box to place itself like that?