Set up a HTML page with left and right panel [closed]

Question

how can I set up a HTML Page with two content sides? Without <frames> !

In example:

On the left side should be the menu for the navigation. On the right side should be the content of the page.

Example menu:

<div id="page">
    <div id="menuleftcontent">
        <ul id="menu">
            <li> <a href="showfirstcontent">first</a></li>
            <li><a href="showsecondcontent">second</a></li>
        </ul>
    </div>
    <div id="maincontent">
        <div id="firstcontent">first</div>
        <div id="secondcontent">second</div>
    </div>
</div>

The menu on the left side should be a fix content and the right content should be changeable.

I have made a sketch:

Thanks in advance

Answer 1

Re-arrange the code so that (i) main content appears before sidebar in HTML source order (ii) add a clearing div (iii) change the href attribute of menu links:

<div id="page">
    <div id="maincontent">
        <div id="firstcontent">firstcontent</div>
        <div id="secondcontent">secondcontent</div>
    </div>
    <div id="menuleftcontent">
        <ul id="menu">
            <li><a href="#firstcontent">first</a></li>
            <li><a href="#secondcontent">second</a></li>
        </ul>
    </div>
    <div id="clearingdiv"></div>
</div>

Then use the following CSS:

#page {
    margin-left: 200px;
}
#maincontent {
    float: right;
    width: 100%;
    background-color: #F0F0F0;
}
#menuleftcontent{
    float: left;
    width: 200px;
    margin-left: -200px;
    background-color: #CCCCCC;
}
#clearingdiv {
    clear: both;
}

For the obscure part of your question, you need to use JavaScript to show/hide divs. While it is possible to use vanilla JavaScript, the jQuery library makes it much easier:

$(function () {
    $("#maincontent > div:gt(0)").hide();
    $("#menu a").on("click", function (e) {
        var href = $(this).attr("href");
        $("#maincontent > " + href).show();
        $("#maincontent > :not(" + href + ")").hide();
    });
});

Demo here