Q:

The layout is displayed incomplete when using thymelaf

I'm trying to create a typical user panel with thymeleaf layouts.
As you can see on the expected result picture below, the layout is composed by a header and left menu. The contents chosen from the menu are displayed in the child section:

However, the result I get is this one:

This is my "fixed parts" code where the header is the "header" fragment and the menu is the "menu" fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Thymeleaf Layout</title>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="panel/css/custom.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>

<div id="wrapper">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">UserName</a>
        </div>
        <div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 &nbsp; <a href="#"
                                                       class="btn btn-danger square-btn-adjust">Logout</a></div>
    </nav>
    <nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/></a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>

</body>
</html>

This is my "child" page where I import both, the header and the menu fragments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Thymeleaf Layout</title>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="panel/css/custom.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>

<div>
    my page content
</div>

<script>
    function test() {
        alert("TEST");
    }
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>

You can find the gitHub repository with the sample code at this link:
https://github.com/MichaelKnight/thymeleafLayout

A:

The layout sample is uploaded to my gitHub repository which you can find at the end of the issue description.
The top bar:
<div layout:fragment="header">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">UserName</a>
        </div>
        <div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 &nbsp; <a href="#"
                                                       class="btn btn-danger square-btn-adjust">Logout</a></div>
    </nav>
</div>

The side menu:
<div layout:fragment="sidebar">
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
                                                                             style="font-weight: normal"></label><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>

                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
                                                                                        style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}"
                                                                         style="font-weight: normal"/></a>
                </li>
            </ul>

        </div>
    </nav>
</div>

Then you have to create the layout page:
<div layout:fragment="sidebar">
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
                                                                             style="font-weight: normal"></label><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>

                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
                                                                                        style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}"
                                                                         style="font-weight: normal"/></a>
                </li>
            </ul>

        </div>
    </nav>
</div>

