Magento 2 – Creating a Custom Homepage Template

The problem here is that you're misunderstanding containers and blocks.

In M2, there is a new concept of containers which are containers for blocks but not real block, they are used to define the structure of a page in the XML and then blocks are assigned to containers.

A container exists for the sole purpose of assigning content structure to a page. A container has no additional content except the content of included elements. Examples of containers include the header, left column, main column, and footer.

A block represents each feature on a page and employs templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing.

Definition of a container from the official doc:

A structure without content that holds other layout elements such as blocks and containers.

Details: A container renders child elements during view output generation. It can be empty or it can contain an arbitrary set of <container> and <block> elements.

Only blocks are being rendered even if the framework generates the container based on the attributes you specified.

You can find more informations at the following links:

• http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-overview.html
• http://alankent.me/2015/01/24/magento-2-containers-and-blocks/

To implement your new layout you need to create a container instead of your div:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>

        <container name="content" label="Main Content Container" htmlTag="div" htmlClass="column content"/>

        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

Then in the layout XML related to your new page you can use the following code to add a block to your container:

<referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template" name="test" template="Package_Module::test.phtml"/>
</referenceContainer>

Finally you can write the following code in your test.phtml template:

<div id="test123"><p>This is a test</p></div>

On the other hand, if you need the div to be a container you can simply do:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>

        <container name="test" label="Main Content Container" htmlTag="div" htmlClass="column content" htmlId="test123" />

        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

That will give you the following container which then you can use (as explained above) to add blocks into it.

<div id="test123" class="content column"></div>

You can achieve all of above without creating a new page layout which is preferable in my opinion. I will only create a custom layout if a very complex layout structure is required which is not achievable through already available layout pages. Magento's layout instructions let you re-use, modify and change layout by using layout instructions.

In your case you can use 1 column page layout and add layout instructions in app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml file to achieve what you require. Let's say you have two cms static blocks with id "cms_block_1" and "cms_block_2", you can use below code:

<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>         
<referenceContainer name="content">
        <block name="cms.block1" before="-" class="Magento\Cms\Block\Block" cacheable="true">
            <arguments>
                <argument name="block_id" xsi:type="string">cms_block_1</argument>
            </arguments>
        </block>

      <block name="cms.block2" after="cms.block1" class="Magento\Cms\Block\Block" cacheable="true">
            <arguments>
                <argument name="block_id" xsi:type="string">cms_block_2</argument>
            </arguments>
        </block>
    </referenceContainer>
    </body>
</page>

Similarly you can create another CMS static block and show it after cms.block2 which will position it at the bottom. You can use css to position block one and block 2 parallel to each other.