css: Issue in resizing window in html5 - css

Question

This is code i tried:
*
{
box-sizing:border-box;
}
div,body,html,h1,nav,article,footer,header{display:block;}
body
{
margin:0;
padding:0;
font-family:Arial;
font-size:14px;
background-color:#fff;
}
#wrapper
{
margin-left: auto;
margin-right: auto;
}
.title p
{
text-align:center;
color:darkgray;
}
img
{
vertical-align:middle;
margin:0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#fixme
{
height : 65px;
position: relative;
overflow : hidden;
}
#animate-area
{
height: 122%;
width: 2538px;
position: absolute;
left: 0;
top: -15px;
background-image: url('http://s30.postimg.org/qnju89rkx/banner.png');
background-repeat: repeat-x;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 30s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#logo img
{
position:absolute;
z-index:999;
vertical-align:middle;
margin-top: -22px;
}
h1
{
text-align:center;
text-align: center;
font-size: 35px;
font-weight: 100;
margin-top:25px;
margin-bottom: inherit;
}
.header-pgf
{
width: 67%;
font-size: 15px;
font-family: verdana;
margin: auto;
margin-top:15px;
}
.title
{
margin-right:auto;
margin-left:auto;
width:960px;
}
.nav
{
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#000));
background: linear-gradient(0deg, red, yellow);
height:45px;
margin-top: -15px;
}
.nav ul
{
text-align:center;
}
.nav ul li
{
display:inline-block;
text-align:center;
}
.nav > ul li:first-child a
{
background-color:Red;
}
.nav > ul li:first-child a:hover
{
text-decoration:underline;
}
.nav li:hover a
{
background-color: red;
}
.nav li a
{
color: #000;
display: block;
padding: 14px 25px;
text-decoration: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav
{
margin: 0;
padding: 0;
list-style: none;
}
.flexslider .slides img
{
width: 960px;
margin-left:auto;
margin-right:auto;
display: block;
}
.flex-pauseplay span
{
text-transform: capitalize;
}
.flexslider .slides > li
{
display: none;
-webkit-backface-visibility: hidden;
}
.slides:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides
{
display: block;
}
* html .slides
{
height: 1%;
}
.flexslider
{
border: 4px solid #fff;
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
zoom: 1;
margin-top: 20px;
}
.flex-viewport
{
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport
{
max-height: 200px;
}
.flexslider .slides
{
zoom: 1;
}
.flexslider .slides
{
border-right:10px;
}
.flex-direction-nav
{
*height: 0;
width:400px !important;
}
.flex-direction-nav a
{
width: 60px;
height: 60px;
display: block;
no-repeat 0 0;
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 1;
-webkit-transition: all .3s ease;
}
.flex-direction-nav .flex-disabled
{
filter:alpha(opacity=20);
cursor: default;
}
.flex-control-nav
{
width: 100%;
bottom: -40px;
text-align: center;
float:left;
margin-top:-200px;
}
.flex-control-nav
{
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
font-weight:bold;
color:darkgray;
cursor:pointer;
}
.flex-control-nav li
{
margin: 0 6px;
display: inline-block;
zoom: 2;
}
.flex-control-nav li:hover
{
color:#000;
}
.flex-control-nav .flex-active
{
cursor: default;
color:#000;
opacity: .7;
}
.column-layout
{
padding-top: 73px;
display: table;
margin: 0 auto;
max-width: 1300px;
}
section
{
padding: 0px 40px;
}
.column-layout p
{
color: darkgray;
}
.column-layout h3, .column-layout img
{
margin-left: 40px;
}
#media (min-width: 992px){
.column-count-1, .column-count-2, .column-count-3, .column-count-4 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
}
.column-count-1, .column-count-2, .column-count-3, .column-count-4 {
width: 25%;
float: left;
line-height: 1.5em;
letter-spacing: 0.4pt;
}
.featured
{
background-color: darkgray;
color:#fff;
padding:10px;
display: flex;
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.featured-pgf
{
float:left;
clear:both;
}
input[type=text] {
border-radius:0px;
padding: 14px 18px 14px 18px;
margin-left: 151px;
margin-top: 8px;
width: 260px;
}
form
{
float:right;
margin:0;
}
.footer-link
{
background-color: darkgray;
line-height: 9pt;
padding: 20px 0px;
margin-top: 55px;
padding-left: 47px;}
.footer-link a:first-child
{
border-left: 0px;
}
.footer-link
{
text-align:center;
}
.footer-link a
{
color: #fff;
border-left: 1px solid #fff;
font-size: 9pt;
line-height: 9pt;
display: inline-block;
text-decoration: none;
padding: 0px 0px 0px 10px;
}
.footer-link a:hover
{
color:#fff;
text-decoration:underline;
}
#footer
{
width:960px;
margin-left:auto;
margin-right:auto;
}
.copyright
{
margin-left: 33px;
font-size: 11px;
color: darkgray;
float:left;
}
#footer img
{
vertical-align:middle;
float:right;
margin: 4px;
}
This is JSfiddle:
http://jsfiddle.net/6deqxyk4/
When resize the window, it will shows like this: http://s27.postimg.org/5p20dklg3/Untitled_1_copy.png
May i know how to align the page when resizing the window, I need to display centring all the content of page.
Mostly i tried, but somewhat missing, please help with my errors.
Any help would be appreciated. Thanks in advance.

Answer 1

Something like this
.wrapper{
width:900px;
margin-left:auto;
margin-right:auto;
}
#header{
width:100%;
// give it orange background here
}
#footer{
width:100%;
// give it background here
}
<div id="header">
<div class="wrapper">
// navigation bar here
</div>
</div>
<div class="wrapper">
// page content here
</div>
<div id="footer">
<div class="wrapper">
// navigation bar here
</div>
</div>

Answer 2

In your html file add a div like http://jsfiddle.net/6deqxyk4/3/
<div id="page">
begin this at the beginning of your content and close it at the end of all content
Then add this to your css
#page{
width:980px;
margin:auto;
}
this will solve it