Creating custom Master Page causes Lists to appear merged with it

Question

Using Design Manager I converted a HTML file into a master page. (This was a simple logo with drop down menus). I then set it to be the default master page for one of my sub sites. The idea is when I create any list from SharePoint Designer for that site I would like those lists to be displayed directly below that drop down menu found within my master page, this is so that I can then link items in my dropdown lists to the forms behind the lists

What I'm currently finding is when I want to add items to those lists (via NewForm.aspx) the form appears on the same level as the master page, not below the logo/drop down menus which I have created. This results in part of the form being hidden behind the master page section.

It feels like I'm missing a number of div tags (e.g. titlerow) within my custom master page to tell any list/form to appear directly below my master page content.

I'm also looking Page Layouts within design manager.

Have any of you come across this before, and might know what I'm missing, or direction to take.

Answer 1

Realised my mistake.

It was due to me having absolute style positions setting for my images and menu bar (e.g. Snippet below of my master page)

<div id="s4-workspace">
    <div id="s4-bodyContainer">
        <script src="/_catalogs/masterpage/FormsTest/Scripts/jquery-1.7.1.min.js"></script>
        <script src="/_catalogs/masterpage/FormsTest/Scripts/scriptMenu.js</script>
        <div>
            <img src="/_catalogs/masterpage/FormsTest/Images/bg-header.jpg" style="position: absolute; width: 100%; height: 100px" alt="" />
            <img src="/_catalogs/masterpage/FormsTest/Images/hilldickinson_white.png" style="position: absolute; top: 40px; left: 10px;" alt="" />
            <ul class="nav" style="position: absolute; top: 100px; ">
                <li>
                    <a href="#">Menu heading 1
                    </a>
                    <ul>
                        <li>
                            <a href="#">Sub Heading 1</a>
                        </li>
                        <li>
                            <a href="#">Sub Heading 2</a>
                        </li>

                        ... etc...

but not having the absolute style applied to the ContentPlaceHolderMain section where all the changeable content goes.

So to fix I applied below to include the style and top attributes on the div tag

   <div data-name="ContentPlaceHolderMain"  style="position: absolute; top: 160px;>
      ... content ...
   </div>

That content is now rendering in the right position.