Mepaulglobusus
New Member
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:\[code\] // 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>\[/code\]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.