Div定位以实现流畅的布局

Question

I'm trying to figure out how to get my planned layout.

I am trying to place a white border around the page (when scrolling content in the container the border should still be there on top). Right now there is a border but content can still place over the border when resizing the browser window or if there is too much content in the content_area. Trying to get the layout pretty fluid so it will resize ok on any device just stacking content and the menu on top of eachother.

I am also trying to center the content_area in the container.

I think the nav_area staying at the fixed bottom center location always visible on top of any content is the only part working as planned right now.

Help much appreciated!

This is my html:

<div id="container_border">

    <!-- CONTAINER -->
    <div id="container">
        <div id="content_area">

            <div class='thumb' data-container='project1_container'>
             </div>

            <div class='thumb' data-container='project2_container'>
             </div>

            <div class='thumb' data-container='project3_container'>
             </div>

            <div class='thumb' data-container='project4_container'>
             </div>

            <div class='thumb' data-container='project5_container'>
             </div>

            <div class='thumb' data-container='project6_container'>
             </div>
        </div>
        <div id="nav_area">
            <div id="nav">
                <div class='link' data-container='a_container'><a href="#">A</a>
             </div>
             <div class='link' data-container='b_container'><a href="#">B</a>
             </div>
             <div class='link' data-container='c_container'><a href="#">C</a>
             </div>
             <div class='link' data-container='d_container'><a href="#">D</a>
             </div>

            </div>
        </div>
    </div><!-- END CONTAINER -->
    </div>

This is my css:

* {
margin: 0;
padding: 0;
font-family: futura;
}

#container_border {
position: fixed;
height: 100%;
width: 100%;
display: block;
background: #fff;
}

#container {
position: fixed;
display: block;
top:10px;left:10px;right:10px;bottom:10px;
vertical-align: center;
background: -webkit-linear-gradient(#FDC0B1, #EAA6C9); /* For Safari */
background: -o-linear-gradient(#FDC0B1, #EAA6C9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FDC0B1, #EAA6C9); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FDC0B1, #EAA6C9); /* Standard syntax (must be last)*/ 

}

#content_area {
position: relative;
margin: 0 auto;
display: block;
width: auto;
height: auto;
}

.link {
text-align: center;
display: inline-block;
margin-right: 15px;
margin-left: 15px;
font-size: 1.5em;
}

.thumb { 
float: left;
background-color: #ccc;
display: block;
width: 250px;
height: 250px;
margin: 30px;
}

#nav_area {
position: fixed;
clear: both;
display: block;
height: auto;
z-index: 2;
left:10px;right:10px;bottom:10px;

}

#nav {
position: relative;
font-style: italic;
height: auto;
text-align: center;
margin-bottom: 10px;
}

#nav a {
color: #381cdf;
text-decoration: none;
}

#nav a:hover {
background-color: #fff;
}

JSFiddle Example

Answer 1

I assume this is what you are after (if not, please include a diagram) add this:

#container {
    overflow: hidden;
}

and change this to:

.thumb {
    width: 16.6%;
}

Change the 16.6%; on how you want your breakpoints, this is 100 / 6 .

http://jsfiddle.net/HPUb6/1/

Answer 2

I'm not pretty sure if is what you need but , this is the example:

http://jsfiddle.net/HPUb6/4/

using display:inline-block and text-align: center will center your thumbs.

#content_area {
 text-align:center;
}
.thumb { 
display: inline-block;
}

I made another changes on the layout using border and removing fixed positions