commandLink not working when images are in same line

Question

This is my code. I am having two images inside panel grid, those two images are placed above a animated Javascript gradient. When the left side image is placed parallel to the logout icon at the right(as mentioned in the image), the logout functionality is not working. When I remove the left side image, logout functionality is working. Kindly provide a solution for this issue.

<h:panelGrid columns="2"  styleClass="topVerticalAlign" style="width: 100%;background: -webkit-linear-gradient(top left, #99D6FF 0%, #9E5EDF 100%);">                
    <p:graphicImage value="/resources/images/zDVI-TPF_Logo.png" height="50" width="150" />             
    <h:panelGrid columns="2" style="text-align: right; float: right">
        <p:graphicImage value="/resources/images/user.png" height="25px" width="25px" />  
        <p:outputLabel value="Welcome,  #{userBean.username}"/>
        <h:outputText value=""/>
        <p:commandLink  action="#{userController.doLogout}">                         
            <p:graphicImage id="logoutIcon" value="/resources/images/logout.png" height="25px" width="25px" />                        
            <p:tooltip for="logoutIcon" style="font-weight: bold" value="Logout" showEffect="clip"  />
        </p:commandLink>
    </h:panelGrid>
</h:panelGrid>

Answer 1

A suggestion. Do not use panelGrid for visual containers. I see Primefaces here, so I highly recommend using p:outputPanel layout="block" (which is rendered as DIV) for things like JS gradients. Same goes for the graphicImage and commandLink container.

<p:outputPanel id="gradientDiv" style="position: relative; ...
    <p:outputPanel id="logoWrapper" style="position: absolute; ...
        ...logo contents
    <p:outputPanel id="userMenuWrapper" style="position: absolute; ...
        ...user menu contents