How do I center elements on a page using percentage widths?


Tags: html,css

Problem :

I'm creating a webpage with a horizontal parallax effect. I set my page width to 400% so that I could have 4 pages and thus it'll respond to different browser widths. However, how would I center elements within each page sections(i.e. how to center elements on sections 0-100%, 101-200%, etc.) I've tried setting a specified width and then using margin: 0 auto, but to no avail. Any ideas?

HTML:

<div id="transition-slide-container">   <!--begin transition-slide-container-->         
            <div id="transition-slide">
                <div class="slide" id="home">
                    <div id="inner-container">
                        <h1>home</h1>                       
                    </div>
                </div>
                <div class="slide" id="portfolio">
                    <div id="inner-container">
                        <h1>portfolio</h1>
                    </div>
                </div>
                <div class="slide" id="about">
                    <div id="inner-container">
                        <p>about</p>
                    </div>
                </div>                  
                <div class="slide" id="contact">
                    <div id="inner-container">
                        <h1>Contact</h1>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    height: 900px;
    width: 400%;    
    z-index: -1;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
    left: 0;
}
.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
    border-left: 1px #000 solid;
}
div#inner-container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
}

Website: andrewgu12.kodingen.com Edit: Here's a jsfiddle: http://jsfiddle.net/6Gtaf/ Thanks!



Solution :

fiddle & full-screen preview

You should either specify min-width: 400% instead of width, or set max-width: 960px on .silde. Otherwise, 4 slides won't fit in smaller than a 960px wide viewport, e.g. every phone (try scrolling to the right on the @sourcecode's fiddle).

The position: absolute is pointless and not good, unless .slide is positioned relative, and coordinates are set, but there's no need to do that.

Also, borders are in addition to the size of the element. You must either change the box model, via box-sizing: border-box, set your width to slightly less than 25%, or have 1px extra on the sides.

text-align center will not* center block-level elements. By default, they span 100% of the width of their parent, and the text inside them is centered. In the demo, I created one div that's 30x30 pixels. Another has the same style, but also margin: 0 auto;.

Setting the container to have a min-height: 100% allows it to grow as needed, doesn't force a scrollbar if it's not needed, and makes sure it takes up at least the entire screen vertically.


    CSS Howto..

    How to strech vertically the container of inline-blocks?

    how to use dynamic css in jsp file base on param value

    How to add a google map icon to this code?

    How can I put a inside of an ? [duplicate]

    HTML/CSS Image Rollover/Animation, specific case with existing code, how to change animation?

    how do i align contact form 7 next to text

    How to load a dynamic view css file using requireJs & Backbone

    How to capitalize first line with css? ::first-line psuedo-element CSS not working

    How to force the horizontal scroll bar to appear?

    How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

    How can I get my divs to process separately?

    How to style form elements unobtrusively with JavaScript and CSS?

    How to change margin according to other elements?

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How to call CSS animation manually with Javascript?

    How can I keep the original :focus element with CSS?

    How to remove hover effect for some of the cells in angularjs

    How to indicate that an LI with a link was pressed.

    How to override the height of parent node using CSS?

    How to force floating blocks staying in the same row in css?

    How to change the value depend on css animation?

    How to use multiple CSS locators as a selenium locator?

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How to adjust contents to automatically fit size of the screen?

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to Minify CSS to its Absolute Minimalistic Essence?

    How to use CSS to ensure items remain offscreen even if window is resized?

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    How to hide the third nested list in this css dropdown nested lists?

    How can I fix left menu in bootstrap 3.0? [closed]