Primefaces Datatable - 4.0 - primefaces

Question

I was using Primefaces 3.4. I recently upgraded to primefaces 4.0.
Below code was working fine in 3.4. However after I upgraded to 4.0, my table facet header doesn't align with the column headers.
<p:dataTable id="itunesTopSongsDt"
var="itunesTopSongsDtV"
value="#{applicationAccessMb.itunesTopSongsList}"
resizableColumns="false"
style="width: 600px; float: right; margin-right: 10px; margin-top: 0px;">
<f:facet name="header">
<p:row>
<p:column colspan="3">
<p:outputPanel style="float:left;">
<h:outputText id="itunesTopSongsDtHdr"
value="iTunes Top 10 Songs"/>
</p:outputPanel>
</p:column>
<p:column>
<p:outputPanel style="float:right;">
<p:selectOneMenu id="songsChartCountrySom"
value="#{applicationAccessMb.songChartCountry}"
effect="fade"
style="text-align: left">
<f:selectItems value="#{applicationAccessMb.reportCountry}"/>
<p:ajax process="songsChartCountrySom"
event="change"
listener="#{applicationAccessMb.getItunesTopSongsForCountry}"
update="itunesTopSongsDt"/>
</p:selectOneMenu>
</p:outputPanel>
</p:column>
</p:row>
</f:facet>
<p:column headerText="Rank"
width="30"
style="text-align: center;">
<h:outputText value = "#{itunesTopSongsDtV.rank}"/>
</p:column>
<p:column width="45">
<p:graphicImage url="#{itunesTopSongsDtV.imagePath}" width="45" height="45"/>
</p:column>
<p:column headerText="Artist"
width="200">
<h:outputText value = "#{itunesTopSongsDtV.artist}"
rendered="#{!itunesTopSongsDtV.itunesArtistLinkFound}"/>
<h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesArtistLink}',
'', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;"
rendered="#{itunesTopSongsDtV.itunesArtistLinkFound}">
<h:outputText value = "#{itunesTopSongsDtV.artist}"/>
</h:outputLink>
</p:column>
<p:column headerText="Title"
width="250">
<h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesLink}',
'', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;">
<h:outputText value = "#{itunesTopSongsDtV.title}"/>
</h:outputLink>
</p:column>
</p:dataTable>
See the pictures. Is there any setting I am missing which I need to do in primefaces 4.0
Thanks
Chirag

Answer 1

A very simple solution would be replace the outputPanel by an easy div with align
<div align="left">
<h:outputText id="itunesTopSongsDtHdr" value="iTunes Top 10 Songs"/>
</div>

Answer 2

Primefaces Datatable - 4.0
Remove all style
First Specified table size i.e 700px;
e.g <style="width:700px;float:left;">
or
Specified div
<div style="width:700px;">
<div>Write your Top ten album here </div>
<div>Write datatable here </div>
</div>