First time working with page layout with WPZ

Question

I have following page layout. Everything is good except the alignment of the webpart all over after rendering. Where is the alignment in the wpz properties? or how do i get this fixed?

Thanks

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
    <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<table border="0" cellpadding="1" cellspacing="1" height="81" width="626">
    <tbody>
        <tr>
            <td>
                <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
                    <tbody>
                        <tr>
                            <td>                                
                                <WebPartPages:WebPartZone id="TopLeftWPImage" runat="server" title="TopLeftWPImage"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table border="0" cellpadding="1" cellspacing="1">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <WebPartPages:WebPartZone id="LeftWPUserGuide" runat="server" Title="Left WP UserGuide" LayoutOrientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                                            </td>
                                            <td>
                                                <WebPartPages:WebPartZone id="MiddleWPDocCenter" runat="server" title="MiddleWPDocCenter"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                                            </td>
                                            <td>
                                                <WebPartPages:WebPartZone id="RightWPProjectTasks" runat="server" title="RightWPProjectTasks"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <WebPartPages:WebPartZone id="TopRightWPContact" runat="server" title="TopRightWPContact"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
            </td>
        </tr>
    </tbody>
</table>


</asp:Content>

Answer 1

I added vertical-align:top inside the and that seems to do the job.

<td style="vertical-align:top">                             
                                <WebPartPages:WebPartZone id="TopLeftWPImage" runat="server" title="TopLeftWPImage"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
                            </td>

Answer 2

Add another content placeholder so you can add your CSS to postion things properly:

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
//CSS link goes here or a style tag
</asp:Content>