Forum Moderators: martinibuster
...is below each page's content so I can't use absolute positioning.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
// just a reset not critical for the example
* {
border:0;
margin:0;
padding:0;
}
//just to make sure we see the difference between them all
html {
background-color: red;
}
// this is the parent
body {
// just to make sure we see that it's stretched for its content
background-color: orange;
// critical for the example: it must have position
position: relative;
// critical for the example: make room for the ad
padding-bottom: 92px;
}
#ad {
// just so we can see it
background-color: yellow;
//critical for the example
position: absolute;
// just some size
width:728px;
height:92px;
// critical for the example: align the bottom of this with its parent
bottom:0;
}
</style>
</head>
<body>
<div id="ad">
<p>ad goes here</p>
</div>
<p>change me with some long text or other content that stays in the flow</p>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
html {
background-color: red;
// target for the min-height of body: this makes it as high as the viewport (needs to be explicit)
height: 100%;
}
body {
background-color: orange;
position: relative;
min-height: 100%;
// center it on the page
margin: 0 auto;
width: 1024px;
}
#wrapper {
//critical to the example, reserved space for the space moved to the wrapper instead of the body
padding-bottom: 92px;
background-color: green;
}
#ad {
background-color: yellow;
position: absolute;
width:728px;
height:92px;
bottom:0;
// center trick for absolute positioned elements: move edge to middle and then back for half of the width
margin-left: -364px;
left: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="ad">
<p>ad goes here</p>
</div>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
</div>
</body>
</html>
