Question

I have always used a global wrapper to keep my layout 960px and contain all of my content inside of the wrapper. I am attempting to move away from this and rather have all of my “divisions” (like masthead, navigation, slider, content_area) to look like this:

 // CSS:
 .container {
            width: 960px;
            margin: 0 auto;
        }

        #masthead {
            width: 100%;
            background: #000;
        }

        #navigation {
            width: 100%;
            background: red;
        }

        #slider {
            width: 100%;
            background: grey;
        }

 // HTML:
 <div id="masthead">
        <div class="container">
            <!-- masthead content goes here -->
        </div>
 </div>
 <div id="navigation">
        <div class="container">
            <!-- navigation content goes here -->
        </div>
 </div>
 <div id="slider">
        <div class="container">
            <!-- masthead content goes here -->
        </div>
 </div>

First off all, I am not convinced that this is the only way (or possibly the best way) of
achieving my end result. Although this works and I am able to style my individual divisions better and still constrain the width and “position” of the content, I would really value input as to how to achieve the above without the excessive container classes.

My 2nd problem, and more specifically why I am asking for advice is in the project I am working with now, I do not have a “container” for the slider above. I want my slides to be full screen (so effectively slide is from the edge of the screen) to a centered position on the page. I still want my slides to be 960px width or not exceed that, but when slided in to be positioned in the centre of the “slider” div.

The plugin I am using is called LayerSlider, which allows for me to have “layers” per slide which can slide in from different directions to the final position for the slide. (example here: LayerSlider full screen preview).

Each slide element is absolutely positioned and you have to indicate using “left” and “top” where the slide layer will be positioned after the animation.

I have managed to get the content “centered” using “left: 50%; top: 5%”, but when I resize my browser, the elements move out of place.

I hope I am making sense and hope someone can give me assistance as to how to position elements in a full width div and still look the same irrespective of the users resolution.

Answer 1

Couldnt find any other solution, sticking with what I know 🙂