I've had alot of trouble keeping my footer on the bottom, when my main div is short on content. But I fixed it with the sticky footer trick. But unfortunately I still have this problem where my main div won't stretch all the way down to the footer when it's short on content. I have fixed this with JS by adding an extra div in the empty space if the main div's bottom edge + the footer were smaller than the viewport. But that's no longer an option since i want to support non js users.
html, body {
height: 100%;
background-color: #678dae;
margin: 0px;
padding: 0px;
}
#wrap {
min-height: 100%;
}
#main {
width: 70%;
/* I need them to be centered like this because my div is being resized from time to time */
margin-left: auto;
margin-right: auto;
overflow:auto;
padding-bottom: 150px;
background-color: #fff;
}
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
background-color: #333;
clear:both;
}
<div id="wrap">
<div id="main">
<div id="content">
<p>Div content</p>
<!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
</div>
</div>
</div>
<div id="footer">
<p>Footer content</p>
</div>
Please try this:
#footer {
background-color: #333;
bottom: 0;
height: 150px;
position: absolute;
width: 100%;
}
html, body {
height: 100%;
background-color: #678dae;
margin: 0px;
padding: 0px;
}
#wrap {
min-height: 100%;
}
#main {
width: 70%;
/* I need them to be centered like this because my div is being resized from time to time */
margin-left: auto;
margin-right: auto;
overflow:auto;
padding-bottom: 150px;
background-color: #fff;
}
#footer {
position: fixed;
margin-top: -150px; /* negative value of footer height */
height: 25px;
background-color: #333;
bottom:0;
width:100%;
}
<div id="wrap">
<div id="main">
<div id="content">
<p>Div content</p>
<!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
</div>
</div>
</div>
<div id="footer">
<p>Footer content</p>
</div>
I have changed few footer properties
height: inherit; may help.. this usually helps with height aspects...
Related
I have the following structure:
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
I dynamically load content in the <article> using javascript. Because of this, the height of the <article> block can change.
I want the <footer> block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.
At the moment I can do one or the other... but not both.
So does anyone know how I can do this - get the <footer> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.
Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.
Flexbox Version
If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.
The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
If you can't use flexbox, my base structure of choice is:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Which isn't all that far off from:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.
HTML:
<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS:
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.
* The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.
Ryan Fait's sticky footer is a simple solution that I have used several times in the past.
Basic HTML:
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Translating this to be similar to what you already have results with something along these lines:
HTML:
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!
I was looking to solve this problem without adding any additional markup, so I ended up using the following solution:
article {
min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}
footer {
height: 50px;
}
header {
height: 50px;
}
nav {
height: 50px;
}
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
You have to know the heights of header, nav and footer to be able to set the min-height for the article. By this, if article has only few lines of content, the footer will stick to the bottom of the browser window, otherwise it will go below all the content.
You can find this and other solutions posted above here: https://css-tricks.com/couple-takes-sticky-footer/
I will like to approach this with css-grid. I will make two-part in your #main-wrapper div. The first one is for content and the second one is for footer.
// HTML
<body>
<div id="main-wrapper">
<div class="main-content">
<header></header>
<nav></nav>
<article></article>
</div>
<footer class="footer">
footer
</footer>
</div>
</body>
In css
#main-wrapper {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
background-color: #a45657;
color: white;
text-align: center;
padding: 10px;
font-size: 20px;
}
You can check the working demo here (Please check-in project view).
This code is taken from my favorite CSS site css-tricks.
2023 - Here's the css only solution. Make 90vh whatever works for your footer.
<div style= "min-height:90vh">
... your content
</div>
<div>
... your footer
</div>
I have the following structure:
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
I dynamically load content in the <article> using javascript. Because of this, the height of the <article> block can change.
I want the <footer> block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.
At the moment I can do one or the other... but not both.
So does anyone know how I can do this - get the <footer> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.
Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.
Flexbox Version
If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.
The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0:
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
If you can't use flexbox, my base structure of choice is:
<div class="page">
<div class="page__inner">
<header class="header">
<div class="header__inner">
</div>
</header>
<nav class="nav">
<div class="nav__inner">
</div>
</nav>
<main class="wrapper">
<div class="wrapper__inner">
<div class="content">
<div class="content__inner">
</div>
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
</div>
</footer>
</div>
</div>
Which isn't all that far off from:
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
The trick to getting the footer to stick is to have the footer anchored to the bottom padding of its containing element. This requires that the height of the footer is static, but I've found that footers are typically of static height.
HTML:
<div id="main-wrapper">
...
<footer>
</footer>
</div>
CSS:
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
#main-wrapper {
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
With the footer anchored to #main-wrapper, you now need #main-wrapper to be at least the height of the page, unless its children are longer. This is done by making #main-wrapper have a min-height of 100%. You also have to remember that its parents, html and body need to be as tall as the page as well.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
Of course, you should be questioning my judgement, as this code is forcing the footer fall off the bottom of the page, even when there's no content. The last trick is to change the box model used by the #main-wrapper so that the min-height of 100% includes the 100px padding.
CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
box-sizing: border-box;
min-height: 100%;
padding: 0 0 100px;
position: relative;
}
footer {
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}
<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>
And there you have it, a sticky footer with your original HTML structure. Just make sure that the footer's height is equal to #main-wrapper's padding-bottom, and you should be set.
* The reason I find fault with Fait's structure is because it sets the .footer and .header elements on different hierarchical levels while adding an unnecessary .push element.
Ryan Fait's sticky footer is a simple solution that I have used several times in the past.
Basic HTML:
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Translating this to be similar to what you already have results with something along these lines:
HTML:
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!
I was looking to solve this problem without adding any additional markup, so I ended up using the following solution:
article {
min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}
footer {
height: 50px;
}
header {
height: 50px;
}
nav {
height: 50px;
}
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
You have to know the heights of header, nav and footer to be able to set the min-height for the article. By this, if article has only few lines of content, the footer will stick to the bottom of the browser window, otherwise it will go below all the content.
You can find this and other solutions posted above here: https://css-tricks.com/couple-takes-sticky-footer/
I will like to approach this with css-grid. I will make two-part in your #main-wrapper div. The first one is for content and the second one is for footer.
// HTML
<body>
<div id="main-wrapper">
<div class="main-content">
<header></header>
<nav></nav>
<article></article>
</div>
<footer class="footer">
footer
</footer>
</div>
</body>
In css
#main-wrapper {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
background-color: #a45657;
color: white;
text-align: center;
padding: 10px;
font-size: 20px;
}
You can check the working demo here (Please check-in project view).
This code is taken from my favorite CSS site css-tricks.
2023 - Here's the css only solution. Make 90vh whatever works for your footer.
<div style= "min-height:90vh">
... your content
</div>
<div>
... your footer
</div>
For a project I have a page where everything is in a wrapper and I scale that wrapper as the screen size gets bigger. Imagine each box being a section.
The middle section bleeds to the right but keeps the same margin to the left as the wrapper does. I don't know the exact width of the the section + the margin on the right and if I do, when it scales it will change. I want the left side to scale inline with the other sections as the browser changes like it does in a regular wrapper.
https://codepen.io/seandaniel/pen/oNvKjop
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
/* this width is just to show what I want it to look like */
width: 1224px;
height: 200px;
margin-left: auto;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<section class="section-2">
</section>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
Is this what you want to happen?
The wrapper will stay the same distance from the left no matter what.
Although I'm not sure if you want your wrapper in the center center (x,y) at all times.
CSS
.wrapper {
border: 1px solid green;
width: 100%;
position: absolute;
left: 45px;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
position: relative;
}
.section-2 {
background-color: blue;
width: 125%;
height: 200px;
margin-left: auto;
position: relative;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
position: relative;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
<section class="section-2">
</section>
<section class="section-3">
</section>
</div>
</main>
In your .section-2 class add the following css rule margin-right: calc(50% - 50vw);
You will also need to nest your <section class="section-2"></section> into the same <div class="wrapper"></div> as your other sections to have the same left alignment.
If you want it to bleed to the left, use margin-left: calc(50% - 50vw); instead of margin-right, or have both to be full width.
This page has a lot of good information about manipulating margins within a container.
Full Width Containers in Limited Width Parents
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
height: 200px;
margin-right: calc(50% - 50vw);
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<div class="wrapper">
<section class="section-2">
</section>
</div>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
I apologize, but unfortunately I couldn't find any answer.
I have this code:
#wrapper {
width: 844px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#posts {
width: 844px;
float: left;
}
.entry {
border: 1px solid black;
padding: 10px;
float: left;
width: 400px;
}
#sidebar {
position: fixed;
width: 250px;
height: 100%;
top: 0px;
right: 0px;
display: table; /* needs to center stuff vertically inside of the sidebar */
}
<body>
<div id='wrapper'>
<div id='posts'>
{block:Posts}
<div class='entry'>
<!-- Tumblr posts -->
</div>
{/block:Posts}
</div>
</div>
<div id='sidebar'>
<!-- Stuff in the sidebar -->
</div>
</body>
I want to keep my #posts centered in the area, where no sidebar is given. I mean #posts has to be centered in its own container. In the code I've shown it goes over the sidebar.
Your question is not so clear but i have coded as per my understanding check this link
HTML
<div id='wrapper'>
<div id='posts'>
{block:Posts}
<div class='entry'>
<!-- Tumblr posts -->
</div>
{/block:Posts}
</div>
<div id='sidebar'>
<!-- Stuff in the sidebar -->
</div>
</div>
CSS
#wrapper {
width: 600px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
float:center;
}
#posts {
width: 70%;
text-align:center;
background-color:yellow;
}
.entry {
border: 1px solid black;
padding: 10px;
/* float: center; */
width: 200px;
margin-left:auto;
margin-right:auto;
}
#sidebar {
position: fixed;
width: 30%;
background-color:cyan;
height: 100%;
top: 0px;
right: 0px;
display: table; /* needs to center stuff vertically inside of the sidebar */
}
Use width of the wrapper as per your need and rest will adjust automatically.
follow the link above to see the live example. I have used background colors to visualize the area properly, you may remove if you want.
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