Question

I have been reading around about best practices when doing developing a website. But I am still curious because the answers are found are mostly various, depend on a project’s scope and many other considerations.

But just to cut it short, basically I wanted to ask about a proper formatting for 3 main elements in a website.

1. Header
2. Main/Body
3. Footer

How is the structure should be build? Are those three should be wrapped in a container like this:

<div class="wrap">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

And how is the styling should be done? I saw some people advised to use position:absolute for the CSS, while some others use relative instead. Sorry for the very basic question, but I am really confused about this at this current point of my learning.

Answer 1

HTML 5 example. Now a days best Layout width is 960. .content{ width:960px }

<!-- Outer Div -->
<div id="content">
    <!-- Inner Content -->
    <div id="content-inner">

        <!-- header -->
        <header>
          <div class="header">
            <div id="header_wrapper"></div>
          </div>
         </header>

         <!-- body -->
         <div id="content-body">
            <section></section>
            <section></section>
         </div>
    </div>

    <!-- footer -->
    <footer>
         <div class="footer">
            <div id="footer_wrapper"></div>
          </div>
    </footer>

</div>