CODEWITHSUNDEEP
htmlcss
Tator
Tator

Reputation: 19

Getting Div tag to extend to the bottom of the Page w/out covering elements already on the page

I have tried absolute to my footer to stay on the bottom of the page but it covers up the elements that are already at the bottom instead of going underneath them. Fixed does the similar thing except if the page is longer it will cover up elements in the center of the page. I literally just want the backgound color of my div to extend to the bottom of the page and have my logo and text stay in between the div at a set height. Here's what I've got.

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="main.css"/>
<title>

</title>

<div class="heading">
<img src="Images/Redbird.gif"   alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px">

<form>
    Search:
    <input type="search" name="Search" style="float:right;">
</form> 
<br></br>
<button type="button" id="Login">Login</button>
<button type="button" id="Login">Create New Account</button>
<h1>Technology Blog</h1>
<a href="index.html">
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;">
</a>
</div>

<div class="table">
<table style+"width:100%">
    <tr>
        <td><a href="phones.html">Phones & Tablets</a></td>
        <td>Computers & Laptops</td>
        <td>Internships</td>
        <td>Troubleshooting</td>
        <td>Product Ratings & Reviews</td>
    </tr>
</table>
</div>
</head>

<body>
<div class="Welcome">
<h2>Welcome</h2>
<p>Welcome to Illinois State University's Technology Blog.  Here you can view and post questions, answers, reviews, and other information that is related to technology.  This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p>
</div>
<div class="Slideshow">
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px">
</div>

</body>

<div class="Footer">

<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px">

Copyright 2014 @ TEC 319 Group <br/> Illinois Sate University
</div>

</html>

heres the CSS. I only need to edit the .Footer tag i believe

html{
height: 100%;
position: relative;
}
h1{
text-align: center;
font-family: impact;
font-style: italic;
}

.heading{
background-color: #CA0000;
height:150px;
}
td{
border:5px solid black;
text-align:center;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
}
table{
width:100%
}
.table{
background-color:black;
height:53px;
}
form{
float:right;
}
button{
float:right;
}
.Slideshow img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer{
margin-top: 40px;
text-align: center;
background-color: #D8D8D8;
padding-bottom: 20px;
width: 100%;
}


.Preview td{
display: block;
text-align: left;
color: black;
background-color: white;

}
.Blog td{
display: block;
text-align: left;
color: black;
background-color: white;
border: 0px;

}
.newPost h2{
display: block;
position: center;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
color: white;
background-color: #790000;
border: 5px solid black;
border-collapse: collapse;
width: 250px;
text-align: center;
}
h3 {
color: white;
background-color: #790000;
border: 5px solid black;

}
h4{
text-align: left;
font-size: 14pt;
color:#790000
}
.back h2{
display: block;
position: left;
border:5px solid black;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
width: 100px;
}

form.comment{
float:left;
size
}
a.blogTitle:link {
color: #790000;
text-decoration: none;
}
a.blogTitle:visited{
color: #790000;
text-decoration: none;
}
a.blogTitle:active{
color: #790000;
text-decoration: none;
}
a.blogTitle:hover{
color: #CA0000;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
a:hover{
color: #CA0000;
text-decoration: none;
}

Upvotes: 0

Views: 58

Answers (1)

Brian
Brian

Reputation: 4354

You need to set the footer position to relative to have it respect other elements on the page. Both absolute and fixed remove the element from the page flow, which causes overlapping.

Demo

Change position:relative to fixed in the demo CSS and then uncomment bottom to see the difference. You can also play with height on the body tag to see how behavior changes.

<div id="content">
  <p>Content</p>
</div>
<div id="footer">
  <p>Footer stuff</p>
</div>  

body {
  margin:0;
  padding:0;
}
#content {
  height:1200px;
  width:100px;
  background-color:#eee;
  position:relative;
  margin:0;
  padding:0;
  border:1px solid black;
}
#footer {
  width:100px;
  position:relative;
  /* bottom:0; */
  background-color:#eee;
  margin:0;
  padding:0;
  border:1px solid black;
}

Upvotes: 1

Related Questions