Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Darren Knight
Darren Knight
4,393 Points

Fixed divs - Centering and flowing content

I am trying to create a div that is fixed with all the content in the div staying centered. I want the background of the containing div to span the width of the page with the inner div being centered on the page and constrained to 940px. This is difficult for me because everything else above and below this div on the page needs to be 940px wide, but I need a solid background in this div that spans the width of the viewport.

(I am also trying some things with scrolling and getting the content below this div to scroll over the top.)

.main-banner-container{
    width: 100%;
    background: #7DBDE9;
    z-index: -1;
}
.main-banner-content{
    width: 940px;
    height: 450px;
    position: fixed;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    height: 100%;
}

5 Answers

Darren Knight
Darren Knight
4,393 Points

Almost. I made a couple tweaks and got what I wanted. Thanks for the help: http://codepen.io/kevink/pen/wzlaA

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

So something like this? http://codepen.io/kevink/pen/wzlaA

I've edited it a bit.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Is this kinda what you where going for? http://codepen.io/kevink/pen/wzlaA

Darren Knight
Darren Knight
4,393 Points
Darren Knight
Darren Knight
4,393 Points

Slightly different than what I am looking for. Here is the markup. I want the content fixed too.

    <div class="main-banner-container">
        <div class="main-banner-content grid-12">   
            This is the main banner
        </div>
    </div>
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

That's all that counts. Awesome!