I have created a unique website layout with 6 sketches placed horizontally in div containers. I am not concerned about the navigation style affecting usability.
To achieve this, I have organized the div sections to be relatively positioned from left to right. Each section contains a wrapper div for easy placement and a content div for image/text display.
However, I seem to have reached a point where I am unsure how to proceed.
My goal is to center the wrapper (and consequently, the content) div both horizontally and vertically within each respective section.
The challenge arises from the uncertainty of the user's screen width when resizing.
For example: The overall body is 1200px wide, while each section is 2000px wide with the wrapper and content housed inside.
- Simply using "margin: 0 auto;" on the wrapper element would center it in the middle of the entire 2000px wide section...
- In reality, it would position the content around 500 pixels away from the edge if my calculations are correct.
I have included a code snippet below to illustrate the issue:
html { height: 100%; }
body{
height: 100%;
width: 12000px;
overflow: hidden;
}
.section {
height: 100%;
background: url("../images/large-swirls.jpg") repeat scroll top right #fff;
float: left;
position: relative;
width: 2000px;
z-index: 0 !important;
}
.wrapper {
/* Difficulty lies here in centering horizontally and vertically */
}
.content {
background: #ccc;
border: 1px solid black;
margin: 0 auto;
width: 1000px;
}
<div class="section" id="sketch1">
<div class="wrapper">
<div class="content">
<p>Hello. I'm one of the sketch sections.</p>
</div>
</div>
</div>
I am seeking advice on how to properly align the content div within sections that extend beyond the page's right side. Any suggestions or ideas are welcome!
I wonder if utilizing some form of position:absolute could be the solution? (Though I am unfamiliar with this approach).
I have explored other horizontally navigable websites for inspiration, but most tend to align content to the left and add padding, which does not provide the centered look I am aiming for.
Any creative solutions or guidance would be greatly appreciated! =)