Home/ Questions/Q 8684693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:22:13+00:00

I am trying to work out how I would go about creating a website

  • 0

I am trying to work out how I would go about creating a website that has 3 separate ‘layers’ (top navigation, then content, then footer) each with a different background image, that tiles to 100% width… but I want my content to be centred (as if the containing divs had margin: 0 auto applied).

So far I have been attempting to create divs just for the background images, and then absolutely positioning my content divs, but allowing them to automatically centre.

But of corse, I am taking elements out of the ‘flow’ of the document there, and so my background image divs end up stacking up against each other.

This is really tough to explain so hopefully this example will help:

http://jsfiddle.net/RB46S/

As you can see, I have my blue div, where the background stretches to 100% BUT I WANT MY NAVIGATION AND A LARGE IMAGE TO CENTRE HERE.

I have my body which is green, then a hp_content div, this would be where all my content would sit, centred, the problem here is you cannot apply a margin or a padding value (i’ve applied them to show them not working), only a position from the top of the parent/browser, which will lead to problems when making my site responsive I believe.

Then I have my red div which is the same as the top navigation (blue) div, It has a 100% border but I want the footer stuff (twitter feed, latest blog post, and contact details) to be centred here.

Hopefully some one understands what I am trying to achieve and knows how to correctly set a page like this up, any help is much appreciated!

Jon

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok! Try structuring your HTML something like this:

    <html>
<head></head>

<body class="index">

    <section class="top">
        <header class="content">
            <nav>
                <ul id="">
                    <li><a href="" id="">link 1</a></li>
                    <li><a href="" id="">link 2</a></li>  
                </ul>
            </nav>
        </header>
    </section>

    <section class="main">
        <div class="content">
            <h2>Whatever</h2>
            <div class="something">This is something else</div>
        </div>        
    </section>

    <section class="footer">
        <footer class="content">
            Footer content
        </footer>
    </section>

</body>
</html>​

    Then some CSS like:

    body, html{    
    width:100%;   
}

body {
    background: green;
}

body > section{
    width:100%;
}

/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
    display:block;
    margin:0 auto;
    width:400px;    
}

section.top {
    height: 510px;
    background: blue;
}

/* if you want to individually change widths for each section, do something like this:*/

section.top .content{
    width:100%;
}    

/* or not! */

section.main {
    height:200px;
}

section.footer {
    height: 400px;
    background: red;
}

    Play around: http://jsfiddle.net/FC2Ea/

    So for each site section, you’d have a container for all of that section’s content with an easy-to-remember class name like “.content”. You can set all the content to the same width, or each section’s content to different widths depending what you’re going for. Either way, the sections will occupy 100% of the browser’s width. Good luck! 🙂

    ​

    • 0