<x-layout style="color: white;">
    <x-header style="height: 50px; background:lightskyblue;">
        header
    </x-header>
    <x-content style="height: 100px; background:deepskyblue;">
        content
    </x-content>
    <x-footer style="height: 50px; background:lightskyblue;">
        footer
    </x-footer>
</x-layout>

<x-layout style="color: white; overflow:hidden;">
    <x-header style="height: 50px; background:lightskyblue;">
        header
    </x-header>
    <x-layout>
        <x-sider style="height: 100px; background: #7cb8ff; width:200px; color: black;">
            sider
        </x-sider>
        <x-content style="height: 100px; background:deepskyblue;">
            content
        </x-content>
    </x-layout>
    <x-footer style="height: 50px; background:lightskyblue;">
        footer
    </x-footer>
</x-layout>

<x-layout style="color: white; overflow:hidden;">
    <x-sider style=" background: #7cb8ff; width:200px; color: black;">
        sider
    </x-sider>
    <x-layout>
        <x-header style="height: 50px; background:lightskyblue;">
            header
        </x-header>
        <xcontent style="height: 100px; background:deepskyblue;">
            content
        </xcontent>
        <x-footer style="height: 50px; background:lightskyblue;">
            footer
        </x-footer>
    </x-layout>
</x-layout>