CODEWITHSUNDEEP
htmlcss
BrunoLM
BrunoLM

Reputation: 100322

How to create full width background elements?

My page size is 960px. However I want two backgrounds on the top of my page (for the headers) that will use 100%.

A full width black background, and bellow it a full width gray background.

I've tried the following jsFiddle

<header id="bg1"></header>
<header id="bg2"></header>

<section id="page">
    <header id="page-header">
        <div>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
            </nav>
            <h2>SiteLogo</h2>
        </div>
    </header>
</section>

bg1 should be a black background and bg2 a gray one.

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    margin-bottom: -60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    margin-bottom: -20px;
    border-bottom: 1px solid cyan;
}

#page-header {height: 60px;}
#page{margin:0 auto;width: 360px;} /* 960px */

body {color: #fff}
nav { float: right; }
nav a { color: #fff; }

I actually check how Stack Overflow did it, and it seems I am doing right, but it only works for a single element. When I try to use a second element it goes above the first.

So my question is, how can I fix it so I will have a full-width black background and bellow it a full-width gray background?

Upvotes: 0

Views: 101

Answers (3)

Charles Ingalls
Charles Ingalls

Reputation: 4561

Do you want to place the logo + nav bar on the black background? Like this: http://jsfiddle.net/jEYbP/6/

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    margin-bottom: -20px;
    border-bottom: 1px solid cyan;
}

#page-header {height: 60px;}
#page{margin:-80px auto 0;width: 360px;} /* 960px */

body {color: #fff}
nav { float: right; }
nav a { color: #fff; }

Upvotes: 1

sbeliv01
sbeliv01

Reputation: 11810

If I understand what you're trying to do correctly, you'll need to simply pull ( negative top margin ) the container content ( your navigation in this case ) into the gray background that spans the width of the page.

The only element that you'll need to apply the negative top margin to is the last background element, in this case it's #bg2 -- you can leave #bg1 without a negative top margin since you're not trying to "pull" content into it.

So, you'll end up with CSS like this ( using your current markup ):

#bg1 {
    background: #000;
    width: 100%;
    height: 20px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 60px;
    margin-bottom: -60px; // This pulls the content below it into this space
    border-bottom: 1px solid cyan;
}

Here's a fiddle example: http://jsfiddle.net/jEYbP/3/

Upvotes: 0

j08691
j08691

Reputation: 207861

Remove the negative bottom margins from your bg1 and bg2 divs. Doing this pulls the elements below upward.

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    border-bottom: 1px solid cyan;
}

jsFiddle example

Upvotes: 0

Related Questions