I already search this forum but none of the solution works for me. As the title mention my page footer is not staying at the bottom.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu,
.main,
.right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
It does worked on mobile but not working on normal display.
Here's the demo page: http://jsfiddle.net/Lwp710be/2/show
and here's the jsfiddle code: http://jsfiddle.net/Lwp710be/2/
A better solution would be for you to use the CSS Grid since the footer and main content area are major sections of the page.
Below is a demo where I have created a grid context on a class with the name.container and applied it to the body element in the markup, I then wrapped the main content within a main element so the body element now has 2 children main and div (the div element is your footer) who both follow the rules of the grid:
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu,
.main,
.right {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="container" style="font-family:Verdana;">
<!-- MAIN CONTENT STARTS HERE -->
<main>
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
</main>
<!-- MAIN CONTENT ENDS HERE -->
<div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
I use flexbox to solved it.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div class="content">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="img_5terre.jpg" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
</div>
<footer class="footer">This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</footer>
</body>
</html>
Related
My css and html is as below but when I shrink the screen size, content columns are not working as I want them one below another.
To be more clear, I want the screen divided into two columns on bigger display. But on smaller screens each content column should occupy hundred percent width of the screen.
.page-container {
position: relative;
min-height: 100vh;
}
.content-wrapper {
padding-bottom: 100px;
}
.left-content {
width: 75%;
float: left;
background-color: red;
}
.right-content {
width: 25%;
float: left;
background-color: green;
}
.content-wrapper:after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
#media screen and (max width: 800px) {
.left-content, .right-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
I want the green right column below the red left column when the screen size is small.
There is a syntax error in the media feature part of your media query. It must be #media screen and (max-width: 800px), with a -.
Here is a solution using flexbox instead of relying on float
You had an error in your media query as well. You were missing the dash in max-width
.page-container {
position: relative;
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.content-wrapper {
padding-bottom: 100px;
display: flex;
flex-flow: row nowrap;
flex: 1;
}
.left-content {
width: 75%;
background-color: red;
}
.right-content {
width: 25%;
background-color: green;
}
.content-wrapper::after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
#media screen and (max-width: 800px) {
.left-content, .right-content {
width: 100%;
}
.content-wrapper {
flex-flow: column nowrap;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
I have this html and css layout. I want to make it when reaching tablet with media query and phone to show like in those 2 images. So I have in normal (desktop mode) 4 products all of them in the same line. When the view reaches tablet - 1199 pixels I want those 4 products to be each 2 on a separate line, so 2 lines with 2 products. On the phone mode 768 pixels I want each product to be on its line with the width full like the wrapper.
Here is the code :
body {
margin: 0px;
padding: 0px;
}
/* Header */
.header {
background-color: yellow;
width: 100%;
margin: 0 auto;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.logo {
background-color: grey;
width: 150px;
height: 50px;
margin-top: 20px;
float: left;
}
.info {
background-color: grey;
width: 285px;
height: 50px;
margin-top: 20px;
float: right;
}
.clear {
clear: both;
}
.menu {
background-color: grey;
width: 1200px;
height: 50px;
margin-top: 20px;
}
/* */
/* Nav-Bar */
.nav-bar {
background-color: lightgray;
width: 1200px;
height: 340px;
margin-top: 20px;
}
/* */
/* Product grid */
.product1,
.product2,
.product3 {
background-color: lightgray;
width: 285px;
height: 320px;
margin-top: 20px;
margin-right: 20px;
float: left;
}
.product4 {
background-color: lightgray;
width: 285px;
height: 320px;
margin-top: 20px;
float: left;
}
/* */
/* Bottom Part */
.content-area {
background-color: lightgray;
width: 100%;
height: 420px;
margin-top: 20px;
}
/* */
/* Footer */
.footer-area {
background-color: gray;
width: 100%;
height: 50px;
margin-top: 20px;
}
/* */
/* Responsive */
#media screen and (max-width: 1199px) {
.product1,
.product2,
.product3,
.product4 {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home View</title>
<link rel="stylesheet" type="text/css" href="../style/homestyle.css">
</head>
<body>
<!-- Header -->
<div class="header">
<div class="wrapper">
<div class="logo"></div>
<div class="info"></div>
<div class="clear"></div>
<div class="menu"></div>
</div>
</div>
<!-- -->
<!-- NavBar -->
<div class="header">
<div class="wrapper">
<div class="nav-bar"></div>
<div class="clear"></div>
</div>
</div>
<!-- -->
<!-- Product Grid -->
<div class="wrapper">
<div class="def1">
<div class="product1"></div>
</div>
<div class="def2">
<div class="product2"></div>
</div>
<div class="def3">
<div class="product3"></div>
</div>
<div class="def4">
<div class="product4"></div>
</div>
<div class="clear"></div>
</div>
<!-- -->
<!-- Bottom Part -->
<div class="wrapper">
<div class="content-area"></div>
</div>
<!-- Footer -->
<div class="header">
<div class="wrapper">
<div class="footer-area"></div>
</div>
</div>
</body>
</html>
The CSSTablet :
I attached the images needed for the layout. Please help!
First you add the view port element to Head of the HTML page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ref. link - https://www.w3schools.com/css/css_rwd_viewport.asp
Then Remove fixed width's from .menu and .nav-bar classes and add as max-width.
.menu {
background-color: grey;
max-width: 1200px;
height: 50px;
margin-top: 20px;
}
.nav-bar {
background-color: lightgray;
max-width: 1200px;
height: 340px;
margin-top: 20px;
}
And also you need to wrap your "Product slots" using "div".
(I used class called "wrapper-inner")
<!-- Product Grid -->
<div class="wrapper">
<div class="wrapper-inner">
<div class="def1">
<div class="product1"></div>
</div>
<div class="def2">
<div class="product2"></div>
</div>
<div class="def3">
<div class="product3"></div>
</div>
<div class="def4">
<div class="product4"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- -->
Then after you can add required CSS media queries.
/* Responsive */
#media all and (max-width: 1199px) {
.wrapper-inner {
margin: 0 -20px;
background: orange;
padding: 0 20px;
}
.def1, .def2, .def3, .def4 {
width: 50%;
padding: 20px;
float: left;
}
.product1, .product2, .product3, .product4 {
width: 100%;
margin: 0 0;
}
}
#media all and (max-width: 768px) {
.def1, .def2, .def3, .def4 {
width: 100%;
padding: 20px;
float: left;
}
}
You are correct in using media queries. In those you can f.e. set the width of your elements like this:
#media screen and (max-width: 1199) {
.product { // you can write .product1, .product2,... but I would suggest creating this new class, as none of those images really need their own css
max-width: 25%; //this will change for tablet and mobile to 50% and 100%
}
}
Now do that for all modes that you want.
Also note that instead of setting a margin-right you could use flexbox with justify-content: space-between in the wrapper; Otherwise you will have to remove those margins for different screen sizes.
I want to create a container so that i have a simple layout with a nav bar at the top and a nav bar on the left side which is about 150px. As the screen gets smaller though, i want the left nav to entirely disappear and have the following occur:
1) Replace the 150px (icon + text) nav bar with just an icon nav bar on the left
or 2) remove/hide the nav bar entirely and have a burger bar in the top nav which will expand a vertical menu down. This would be the exact same menu as the one before on the left except it would not be displayed from the top nav rather than the side.
What i've done so fat?
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Awesome Bootstrap 3 Sidebar Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
/* MORE THAN 75 */
body {
background-color: skyBlue;
}
/* LESS THAN 75 */
#media (max-width: 74.9em) {
body {
background-color: pink;
}
}
/* LESS THAN 62 */
#media (max-width: 61.9em) {
body {
background-color: blue;
}
}
/* LESS THAN 48 */
#media (max-width: 47.9em) {
body {
background-color: green;
}
}
/* LESS THAN 34 */
#media (max-width: 33.9em) {
body {
background-color: red;
}
}
.navbar-outer {
width: 600px;
}
.aav {
background-color: black;
color: white;
border-style: solid;
border-color: red;
}
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row aav">
<div class="col-xs-6 col-md-2" style="width:100px; border:solid; color:white;">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-4</div>
</div>
I'm trying to create the left nav and the content pane. I'm thinking too much of java i guess because i'm not sure how to go about the implementation. Any feedback is appreciated.
I'm stuck because i don't want the left bar to scale, i want it to be a fixed width until the screen gets too small for it.
This is a complicated question, but the gist of it is that you can set a container (or just set styles on the body element itself) to hold your nav, sidebar, and general content area, and then modify their widths and heights with media queries.
So given your page is 100vw across, for example, your sidebar could be 150px wide as you mentioned, and that would leave 100vw - 150px for the width of the main content area. You'd float them next to each other.
main {
width: 100vw;
}
aside {
float: left;
width: 150px;
}
section {
float: left;
width: calc(100% - 150px);
}
When you want the sidebar to narrow, you can adjust the width of the sidebar and the calc expression for the main content area. (You'd also hide the labels next to your icons.)
#media all and (max-width: 900px) {
aside {
width: 40px;
}
section {
width: calc(100% - 40px);
}
}
When you get to mobile view, your sidebar can simply become 100% width of the screen, and then you'll need additional CSS to change the display of the icons and whatnot.
#media all and (max-width: 600px) {
aside {
width: 100%;
}
section {
width: 100%;
}
}
That's the general principle you'll want to work with, but a lot of the other CSS will probably depend exactly on your site. Below is an example.
main {
width: 100vw;
height: 100vh;
}
nav {
background-color: #5BA1CB;
height: 80px;
}
nav .title {
width: 130px;
height: 60px;
margin-top: 10px;
margin-left: 10px;
background-color: rgba(255, 255, 255, 0.2);
float: left;
}
nav .burger {
float: left;
margin-left: 20px;
height: 100%;
}
nav .burger img {
margin-top: 10px;
}
aside {
background-color: #144360;
width: 150px;
height: calc(100% - 80px);
float: left;
}
aside .icon {
margin-left: 5px;
margin-top: 50px;
}
aside .icon:first-child {
margin-top: 100px;
}
aside .icon span,
aside .icon img {
vertical-align: middle;
display: inline-block;
}
section {
float: left;
width: calc(100% - 150px);
height: 100%;
background-color: #DAEAF4;
}
#media all and (max-width: 900px) and (min-width: 601px) {
aside {
width: 40px;
}
aside .icon span {
display: none;
}
section {
width: calc(100% - 40px);
}
}
#media all and (max-width: 600px) {
aside {
width: 100%;
height: 150px;
}
aside .icon {
float: left;
width: 100px;
}
aside .icon:first-child {
margin-top: 50px;
}
section {
width: 100%;
}
}
<main>
<nav>
<div class="title"><span>Title Area</span></div>
<div class="burger">
<img src="http://placehold.it/60x60?text=BURGER" />
</div>
</nav>
<aside>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
</aside>
<section>
<h1>Body</h1>
</section>
</main>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
I have a basic site structure with a header, a footer and a content area.
Almost all of the solutions I could find to center the content of the page uses CSS absolute positioning, with setting the margins of the content div, and having it float in the center of the browser window.
However, this results in the content covering the header and/or the footer when the window's size is reduced.
Instead, I would like the page to scroll when it cannot fit into the window.
Here is a screenshot of the page:
The area with the red border should be vertically centered without covering any of the other elements.
Here is the HTML&CSS I'm using:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout Test</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header Content</div>
<div class="articleContainer">
<div class="articleLeft">
<div class="articleTitle">
<h1 class="articleTitle">Title</h1>
</div>
<div class="articleText">
<p>Lorem ipsum ...</p>
</div>
</div>
<div class="articleRight">
<div class="articleImage"></div>
</div>
<div class="stepper">Stepper</div>
</div>
<div class="push"></div>
</div>
<div class="footer">Footer Content</div>
</body>
</html>
CSS:
#charset "UTF-8";
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -48px;
}
.header {
text-align: center;
background-color: #7FF152;
height: 48px;
}
.articleContainer {
background-color: #CCFFFF;
margin-right: auto;
margin-left: auto;
width: 700px;
clear: both;
min-height: 240px;
position: relative;
border: medium solid #FF0000;
}
.articleLeft {
float: left;
height: 450px;
width: 330px;
}
.articleTitle {
text-align: center;
margin: 20px;
}
.articleText {
max-height: 350px;
overflow: auto;
}
.articleRight {
float: right;
height: 450px;
width: 330px;
background: url(articleImage.fw.png) no-repeat center center;
}
.stepper {
clear: both;
text-align: center;
background-color: #FFFF00;
}
.footer {
background-color: #CC6633;
text-align: center;
height: 48px;
}
.footer, .push {
height: 48px; /* .push must be the same height as .footer */
}
I have uploaded both to here: http://cl.ly/3f2o1v0U2c0k
This is the jsfiddle: http://jsfiddle.net/gudmN/1/
Thank you for the help.
1) add margin: 0 auto; height: auto; float: left to .articlecontainer.
2) Make the header and footer float: left; width: 100%; height: 48px