Using & lt; h: outputStylesheet & gt; render & lt; p: outputLabel & gt; invisible component


I have a rather strange issue with a webpage I'm working on in JSF. Basically, when I include the stylesheet for the website, using an h:outputStylesheet tag, the outputLabel component representing the document's title disappears.

The outputLabel is in the page source, and the rendered attribute = true, but it's invisible.

I'm using JSF2.2, PrimeFaces 5.1, OmniFaces 1.8 (though there aren't any omnifaces tags on the page), in netbeans with Glassfish 4.1. Testing in Chrome Version 38.0.2125.111 m.

<html xmlns=""
        <title>Activity View</title>
        <h:outputStylesheet library="stylesheets" name="main.css"/>
        <div id="title" class="pageHeader">
            <pf:outputLabel value="Activity: [Title]: [Type]"/>
                <pf:tab title="Brief" >

Here's the CSS:

font-size: x-large;
float: left;
margin-right: 10px;


Can anyone shed any light on why this might be the case? I've used this pattern elsewhere on the site without any issues.

The cause is float: left; - you can verify this by selecting the div and disabling the styles one by one in firebug:

The floating makes the divs overlap as described here.

So you can either

  • delete float: left;. Seems to make no difference with current code.
  • put style="clear: both" on the div just below

and there are even more solutions, its called "clearfix".