CSS：图像正在对角线

So I am having this strange problem when I am trying to display images using html within my PHP file. Currently I am using phpExcel to pull data off a spreadsheet such as a product name, sku, sizes, qty, etc, then placing an image. The goal was to display the product name, the image underneath, then all the size and qty info to the right of the image but I end up with something like this:

My code that I am using is this loop:

$VendorSkus = array();
for ($x = 13; $x <= $highestRow; $x++) {
    if ($sheetData[$x]["E"] != null) {
        if (!in_array($sheetData[$x]["J"], $VendorSkus)) {
            echo $sheetData[$x]["E"] . " 
            <p><img src='/images/" . $sheetData[$x]["J"] . ".jpg' style='float:left'; height='262' width='262'></p>
            <p>" . $sheetData[$x]["J"] . "</p>";
        }

    echo "
    Size: " . $sheetData[$x]["M"];
    echo "Qty: " . $sheetData[$x]["N"] . "<br/>
    ";
    echo "<p><!-- pagebreak --></p> 
    </body>
    </html>";
        $VendorSkus[] = $sheetData[$x]["J"];
    }
}

This would work perfect if I could get the images to line up under each other right about the last size. Why is this happening? I space problem perhaps?

This is a problem with the css float property. You need to use a clearfix. Example tutorial: http://www.cssreset.com/understanding-clearing-floats-css-tutorial/

The quick solution is to not use p tag with float and use div tags instead. That will put everything underneath each other. (replace all <p> with <div>)