Question

I’ve got a layout, here’s my css:

body {
    background-color: #16193B; /* Old browsers */
    margin: 0;
    padding: 0;
    color: white;
    background-attachment: fixed;
    overflow: hidden; 
}

html {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

#content {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : hidden;
}


#wrap div{
    height:100%;
    width:100%;
}

#b1 {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #35478C;
    position:relative;
}

#b2 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #4E7AC7;
    position:relative;
}

#b3 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #7FB2F0;
    position:relative;
}

#b4 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : auto;
    position:relative;
}

And thats in the body of the HTML-File:

    <div id="b1">

        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="content">

                    </div>
                </div>
            </div>
        </div>

    </div>

This is my layout, but it should just be the background of the page… Unfortunately if I add text to some other div then “content” the rectangle overlays the others. How can I fix this? Actually I want a menu bar which is the top “layer” and overlays all under it…

Answer 1

Ok, before you look at my jsFiddle-Solution:

1. Be aware that using divs for such backgrounds is not a beautiful solution. Best would be using a background-image on your body-tag, which you stretch with background-size. It’s supported in all modern browsers. The only problem would be IE8 and downwards.

2. Your CSS is a mess. When styling elements with similar attributes, use a class instead styling every ID by itself.

I basically created a new div with your custom content and a class on your background-divs. I also had to clean up your CSS and deleted unnecessary statements:

-> jsFiddle <-

HTML:

<div  class="centerIt" id="b1">
    <div  class="centerIt" id="b2">
        <div  class="centerIt" id="b3">
            <div  class="centerIt" id="b4">
                <div id="content"></div>
            </div>
        </div>
    </div>
</div>
<div id="contentContainer">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi laboriosam illum esse voluptas libero aperiam voluptate omnis dolor odio natus tempore sunt doloribus. Suscipit iure vel totam eius reprehenderit.</div>
</div>

​
CSS:

.centerIt {
    position: relative;
    margin-left: auto;
    margin-right: auto;    
}