Posted under HTML
Permalink
Tags CSS, Gotcha, HTML, Tip
A column header consisted of a text string, plus a Primefaces icon which was to be floated right in the header, in line with the text.
My initial HTML consisted of the following :-
header text<span style=”float:right;” class=”iconclass”></span>
where iconclass was one of the standard Primefaces classes for rendering icons using CSS backgrounds.
In this case, I could not stop the icon from being dropped onto a new line below the text. It was still floated right correctly, but dropped down a line.
I compared it with another similar example (not one of mine) which did work correctly, and could see no difference at all in the technique or the CSS properties of any of the elements – I would absolutely have expected both to behave the same but they did not.
In the end, simply swapping the order of the elements made it work correctly :-
<span style=”float:right;” class=”iconclass”></span> header text
I.E. putting the floated icon first and then specifying the text worked correctly and did not drop the icon down!
I am not clear on the precise reasoning for this behaviour – it was consistent across various browsers. I suspect it has to do with some of the subtleties of floating behaviour.
However, the lesson was simple – the order of elements in cases like this matters, and may result in a solution in similar cases which ‘should’ work but don’t!
Leave a Reply
You must be logged in to post a comment.