Live Code Editor Version 2.0

layout 5 RUN

<!DOCTYPE html>
<html>
    <head>
        <title>Layout HTML Basic</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            #header{
                background: yellow;
                height: 100px;
            }
            #menu{
                background: grey;
                height: 30px;
            }
            #main_content{
                background: pink;
            }
            #footer{
                background: red;
                height: 150px;
            }
            
            #left_sidebar{
                float:left;
                width: 300px;
                height: 400px;
                background: blue;
            }

#right_sidebar{
                float:right;
                width: 300px;
                height: 400px;
                background: orange;
            }

#content{
                margin-left: 300px;
                margin-right: 300px;
                height: 300px;
                background: #fff
            }
        </style>
    </head>
    <body>
        <div id="main_wrapper">
            <div id="header">
                <img src="https://freetuts.net/public/logo/logo.png?rand=5"/>
            </div>
            <div id="menu">
                Menu
            </div>
            <div id="main_content">
                <div id="left_sidebar">
                    Left sidebar
                </div>
                <div id="right_sidebar">
                    Right sidebar
                </div>
                <div id="content">
                    Main Content
                </div>
                <div style="clear: both"></div>
            </div>
            <div id="footer">
                Footer
            </div>
        </div>
    </body>
</html>