Q:

How to add product categories in my own div?

I've created a div called nav_container and I'd like the Magento product categories to be placed in that div instead of in the default header.
What is the simplest way to do this? I've researched this for a long time with no solution. Thanks for any advice. I'm using Magento 1.7. 

A:

There are several ways to achieve this:

Copy app/design/frontend/base/default/page/html/topmenu.phtml to app/design/frontend/your_package/your_theme and simply add in your wrapping div.
Edit app/design/frontend/your_package/your_theme/page/html/header and find the line: <?php echo $this->getChildHtml('topMenu') ?> and simply surround it with you div
You could also use layout xml, specifically a page/html_wrapper block - but for this simple example option 1 or 2 would most likely be the best option

EDIT
Please see below the correct solution after realising your confusion regarding blocks
Ok, so first of all, blocks have a very specific meaning in Magento, entirely different to that of an html tag.  You can find a definition of blocks here: http://www.magentocommerce.com/design_guide/articles/magento-design-terminologies4#term-blocks
Now, to move the top nav in 1.7 CE:
As ever with layouts in Magento, you have two main options: Copy over base layout files into your current theme and edit, or use a local.xml file in your theme for all base layout overrides.
There are pros and cons to each - though I would advocate you use local.xml unless there is specific reason not to.  But it is entirely up to you which method you choose :)
1. Using local.xml
app/design/frontend/your_package/your_theme/layout/local.xml

<layout version="0.1.0">

    <!-- Other layout xml -->

    <!-- 
        Unset the nav from the header 
    -->
    <reference name="header">
        <action method="unsetChild"><alias>topMenu</alias></action>
    </reference>

    <!-- 
        Insert it into your new containing block
    -->
    <reference name="nav_container">
        <action method="insert"><alias>top.menu</alias></action>
    </reference>

    <!-- Other layout xml -->

</layout>

2. Copying over base files
First, copy app/design/frontend/base/default/layout/page.xml to app/design/frontend/your_package/your_theme/layout/page.xml
Find the header block, which if untouched will be exactly as follows:
<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
        <label>Navigation Bar</label>
        <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
    </block>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
</block>

and change to:
<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
</block>

At this point, you have simply removed the top.menu block from the layout.
Next, you need to add the block back into the layout under the correct node: nav_container.
So, wherever you are currently declaring your nav_container block add as a child node the xml you just removed i.e.:
<block type="core/text_list" name="top.menu" as="topMenu" translate="label">
    <label>Navigation Bar</label>
    <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
</block>

Finally clear your cache and reload the page.

