CODEWITHSUNDEEP
htmlcsslayoutheader
Hocacru
Hocacru

Reputation: 39

How to make this Header/Content/Footer/Menu layout using CSS?

I have been trying all day to create this kind of website template in CSS without succeeding.

Any help would be greatly appreciated. THX

++++++++++++++++++++++++++++++++++++++++++++++++++++++
+  M +                                  HEADER                                                 +
+  E  ++++++++++++++++++++++++++++++++++++++++++++++++++
+  N  +
+      +                                CONTENT                                                +
+  U  ++++++++++++++++++++++++++++++++++++++++++++++++++
+      +                                 FOOTER                                                 +,
++++++++++++++++++++++++++++++++++++++++++++++++++++++

Layout

Upvotes: 0

Views: 11013

Answers (2)

nico
nico

Reputation: 835

<div class="page">
    <div class="left-bar">
        <div class="menu">
            MENU
        </div>
    </div>
    <div class="right-bar">
        <div class="header">HEADER</div>
        <div class="content">CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</div>
<style>
    * {text-align:center;}
    html, body {margin:0; padding:0;}
    .page {position:relative;}
    .left-bar {position:absolute; left:0px; width:200px; height:100%; border-right:2px solid red;}
    .right-bar {margin-left:200px; padding-top:150px;}
    .header {position:fixed; left:200px; top:0px; right:0px; height:150px; border:2px solid blue; background:#eeeeee;}
    .content {height:1000px;} /*replace with height:auto; for real content*/
    .footer {height:40px; border-top:2px solid green; background:#eeeeee;}
</style>

Upvotes: 3

iabramo
iabramo

Reputation: 192

Try using Bootstrap. http://examples.getbootstrap.com/

You can easily create a sticky left menu that will also be responsive for devices of all sizes.

Upvotes: -2

Related Questions