How to prevent embedded visualforce widget in standard page layout from becoming misaligned with other fields on window resize?

Question

I have a visualforce page that I am embedding directly inside the standard page layout for the Products object. I am trying to make it look and feel like a native widget. I followed the suggestion here to do that: https://salesforce.stackexchange.com/a/45610/49567

However, I'm having a bit of an issue: The width of the columns in the widget is not consistent with that of the standard field labels/values on the page.

If I resize the browser window, they become misaligned. Here is some screenshots illustrating this undesirable behavior ("product image" is the custom VF widget, "product description" is a standard field in the native layout):

Alignment when browser is sized just right (how I want it to look):

Alignment when browser width is reduced slightly (not good)

Alignment when browser width is reduced even more (even worse)

Here is my Visualforce code (irrelevant parts truncated for brevity):

<apex:page standardController="Product2" extensions="ProductPhotosExtension">
    <apex:form id="photoUploaderForm">
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="2">
                <apex:pageBlockSectionItem labelStyle="display:none;" dataStyle="display:none;">
                    <apex:outputText>&nbsp;</apex:outputText>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Product Image" for="fileImageId"/>
                    <apex:inputFile id="fileImageId" value="{!fileBody}"
                                    filename="{!fileName}" onchange="uploadFile(event);"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:actionFunction name="callUploadMethod" action="{!upload}"/>      
    </apex:form>
</apex:page>

NOTE: I have the VF widget set to 100% width and 50 pixel height

Answer 1

So I've come up with a pretty ugly hack to (kind-of) fix this. I cannot stress enough, however, that this is a seriously ugly hack and it still isn't perfect as the elements aren't going to be perfectly aligned at certain window sizes (unless you add a crapton more media queries)

Some web developers may find the following code disturbing. Viewer discretion is advised.

CSS static resource file (photouploaderstyles):

.photoUploaderForm {
    width: 94%; 
    margin-left: 17%;
    position: fixed;
    overflow: hidden;
}

@media (max-width: 563px) {
    .photoUploaderForm {
        width: 155%;
        margin-left: 4%;
    }
}

Visualforce code:

<apex:page standardController="Product2" extensions="ProductPhotosExtension">
    <apex:stylesheet value="{!$Resource.photouploaderstyles}"/>
    <apex:form id="photoUploaderForm" styleClass="photoUploaderForm">
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Product Image" for="fileImageId"/>
                    <apex:inputFile id="fileImageId" value="{!fileBody}"
                                    filename="{!fileName}" onchange="uploadFile(event);"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:actionFunction name="callUploadMethod" action="{!upload}"/>      
    </apex:form>
</apex:page>