Home/ Questions/Q 8333785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T03:08:35+00:00

Ok guys I am completely aware this question has been asked on several sites

  • 0

Ok guys I am completely aware this question has been asked on several sites several times and i have done my research and tried all the solutions people have given but i am obviously missing something as they are not helping. Im relatively new to HTML and CSS so maybe its something simple that i have overlooked.

Heres my problem. I have header and a container divs then a footer div, i want the footer div to remain stuck to the bottom of the window but when the window is resized i do not want it to overlap the container div.

I can get the footer div to stick to the bottom of the browser no problem with the obvious absolute positon and bottom 0 CSS, but obviously that then causes the overlap problem with the container div, so i did my research and have tried adding a relative position to the body tag and that then moves the footer div to the bottom of the container div and not the bottom of the window. I have created a mini simulation of my problem here:

First without the relative position on body:

http://www.klstuff.com/test1

Then with relative position on body:

http://www.klstuff.com/test2

Basically i want box 2 to stick to the bottom of the window but when the window is resized i do not want it to overlap box 1. I have also tried adding min-height and height 100% attributes to the body and container tags but that seems to not do anything at all. here is the code for test2 (with the relative position attribute as i think that is slightly closer to being right.)

<?xml version="1.0" encoding ="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<head>
<title>HTML/CSS Test Site</title>
<meta name="description" content="HTML/CSS testing page.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>


<body>


<div id="Box1">
    <p>BOX 1</p>
</div>

<div id="Box2">
    <p>BOX 2</p>
</div>

</body>
</html>

body {
height: 100%;
position: relative;
}

#Box1 {
width: 980px;
background-color: blue;
color: #fff;
margin: auto;
text-align: center;
padding-bottom: 150px;
padding-bottom: 150px;
margin-top: 200px;
}

#Box2 {
width: 100%;
background-color: red;
text-align: center;
padding-bottom: 50px;
padding-bottom: 50px;
position: absolute;
bottom: 0;
left: 0;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Wahoo finally did this! Took me a while.

    Ok first things first, make a containing div surrounding both boxes. Set the body’s height to 100% and then set a min-height of 100% for the container. Set the containers position to absolute and it’s width to 100%.

    Then, set a height for your footer and set a margin-bottom of the same value, to you’re main content (i.e. box 1). As per the code:

    HTML:

    <div id="container">
   <div id="Box1">
       <p>BOX 1</p>
   </div>

   <div id="Box2">
       <p>BOX 2</p>
   </div>
</div>

    CSS:

    body {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#Box1 {
  width: 980px;
  background-color: blue;
  color: #fff;
  margin: auto;
  text-align: center;
  height: 150px;
  margin-bottom: 100px;
  margin-top: 200px;
}

#Box2 {
  width: 100%;
  background-color: red;
  text-align: center;
  position: absolute;
  bottom: 0;
  height: 100px;

}

#container {
  width: 100%;
  min-height: 100%;
  position:absolute;
}

    Hope this helps. It works for me.

    • 0