my code stock.com

Tobias Hopp

3 Spalten Layout mit Header und Footer
by Tobias Hopp

Klassisches 3-Spalten Layout

Snippet options

Download: Download snippet as 3-spalten-layout-mit-header-und-footer.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3 Spalten Layout</title>
<body>
<!-- Komplette Box für die ganze Seite -->
<div id="wrapper">
    <!-- Der Header mit der ID "masthead" -->
    <header id="masthead">
        <h1><a href="#">OceanSky</a></h1>
        <h2>Der Himmel muss warten &hellip;</h2>
    </header>
    <div id="menu-bar">
        <ul id="main-menu">
            <li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item">
                <a href="#">Gallery</a>
                <ul class="dropdown">
                    <li><a href="#">Kanada</a></li>
                    <li><a href="#">Malediven</a></li>
                    <li><a href="#">Spanien</a></li>
                    <li><a href="#">Nordpol</a></li>
                </ul>    
            </li>
            <li class="menu-item"><a href="#">Unterwegs</a></li>
            <li class="menu-item"><a href="#">Kontakt</a></li>
            <li class="menu-item"><a href="#">Impressum</a></li>
        </ul>
        
    </div>
    <div class="sidebars" id="left-sidebar">
        <h2>Sidebar Links</h2>
        <ul>
            <li><a href="#">Punk 1</a></li>
            <li><a href="#">Punk 2</a></li>
            <li><a href="#">Punk 3</a></li>
            <li><a href="#">Punk 4</a></li>
            <li><a href="#">Punk 5</a></li>
        </ul>
        <h2>Javascript</h2>
        <p>A simple Pop-Up</p>
        <button onclick="showAlert()">sag' Hallo</button>
    </div>
    <div class="sidebars" id="right-sidebar">
        <h2>Sidebar Rechts</h2>
        <ul>
            <li><a href="#">Punk 1</a></li>
            <li><a href="#">Punk 2</a></li>
            <li><a href="#">Punk 3</a></li>
            <li><a href="#">Punk 4</a></li>
            <li><a href="#">Punk 5</a></li>
        </ul>
    </div>
    <div class="content" id="page-body">
        <h1>Inhalt von Ocean Sky</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eaque officiis id quo iste laudantium fuga molestias illo, cupiditate expedita accusamus, minima unde. Doloremque voluptate non corporis ad soluta id sint obcaecati qui, animi reprehenderit eum optio vero, architecto repellendus rem et eligendi! Saepe earum maxime porro adipisci, officia laudantium accusamus fugiat officiis quis labore quia omnis ad aperiam quaerat sed possimus deserunt sit voluptate quas voluptatum voluptatibus. In corporis veniam maxime repellendus unde molestias. Accusamus quisquam, reiciendis aperiam. Minus aut numquam saepe rerum, est labore! Reiciendis quis, officia ipsa ipsam sequi culpa incidunt commodi laboriosam, at aspernatur. Veniam, aut! Unde repudiandae sapiente quia, tenetur dolorem quo magnam saepe dolor eligendi atque aperiam incidunt dolorum provident neque id eius culpa. Cupiditate ut dicta fugiat odio quos commodi illo, voluptatum placeat officiis? Dolore neque error quia distinctio cum maiores officia hic veritatis placeat optio quam magnam consequatur, alias suscipit minus vel amet sit debitis omnis enim et quis nulla vitae! Accusantium temporibus vitae voluptas voluptatem ad, harum, at esse, excepturi sint consectetur unde atque aspernatur! Non saepe repellat itaque voluptatum sint dicta tenetur! Sit corporis, sequi dicta. Dicta repudiandae animi enim necessitatibus laudantium eius ea culpa!</p>
    </div>
    <div id="footer">
        OceanSky &copy; 2015
    </div>
</div>
</body>
</head>
</html>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.