Search code examples
csswhitespacefooter

Cannot remove white space below footer

I have a big bar of white space below my footer and cant figure out how to remove it. Basically I want everything below the footer to be gone.

Any help appreciated, just learning code so new to this.

https://jsfiddle.net/ptgL5pv6/1/

function active() {
  var search_bar = document.getElementById('search_bar');
  if (search_bar.value == 'Search') {
    search_bar.value = '';
    search_bar.placeholder = 'Search';
  }
}

function inactive() {
  var search_bar = document.getElementById('search_bar');
  if (search_bar.value == '') {
    search_bar.value = 'Search';
    search_bar.placeholder = '';
  }
}
body {
  background: #efefef;
  margin: 0 auto;
  font-family: Verdana, Arial, sans-serif;
}

.container {}

.top_section {
  background: #000;
  padding: 20px;
}

.first_image {
  position: relative;
  text-align: center;
}

.nav_bar {
  background: #222b2f;
  border: 10px solid #222B2F;
  font-size: 18px;
  font-weight: bold;
  text-transform: none;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.nav_bar a {
  position: relative;
  color: #fff;
  Text-decoration: none;
  padding: 20px;
}

.nav_bar a:hover {
  color: #fff;
  Text-decoration: underline;
}

.third_bar {
  background: #000;
  position: relative;
  height: 350px;
}

.second_image {
  position: relative;
  text-align: center;
  height: 370px;
}

#search_bar {
  position: relative;
  bottom: 50px;
  height: 150px;
  border: 1px solid #000;
  border-right: none;
  font-size: 36px;
  padding: 10px;
  outline: none;
  width: 800px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-botton-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 110px;
}

#search_button {
  position: relative;
  width: 200px;
  bottom: 222px;
  height: 172px;
  border: 1px solid #000;
  font-size: 36px;
  padding: 10px;
  background: #f1d826;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-botton-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  left: 710px;
}

#search_button:hover {
  background: #f6e049;
}

.form {
  width: 200px;
  margin-top: -220px;
  padding-left: 280px;
}

.footer {
  position: relative;
  background: #000;
  color: #fff;
  bottom: -10px;
}

.copyright {
  position: relative;
  bottom: -8px;
  left: 0;
  overflow: hidden;
}

.footer_notes {
  position: relative;
  text-align: center;
  bottom: 10px;
  left: 100px;
  overflow: hidden;
}
<div id="container">
  <div class="top_section">
    <div class="first_image">
      <a href="#"><img src="logo.png" /></a>
    </div>
  </div>

  <div class="nav_bar">
    <a href="#"> Home</a>
    <a href="#"> Search</a>
    <a href="#"> About us</a>
    <a href="#"> Products & Pricing</a>
    <a href="#"> Contact us</a>
    <a href="#"> login</a>
  </div>

  <div class="third_bar">
    <div class="second_image">
      <img src="whisky.png">
    </div>
    <div class="form">
      <form action="search.php" method="post">
        <input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();" />
        <input type="submit" id="search_button" value="Go!" />
      </form>
    </div>
  </div>

  <div class="footer">
    <div class="copyright">
      &copy test.com &reg
    </div>
    <div class="footer_notes">
      test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
    </div>
  </div>
</div>

Solution

  • Firt of all, edit this .footer-notes css and remove left:100px; from it. It is making your page width greater then 100%

    .footer_notes{
  position: relative;
  text-align: center;
  bottom: 10px;
  padding-left: 100px;
  overflow: hidden;
  max-width:100%;
}

    then dont declare height on .third-bar this makes your footer come up even if their is content above the footer

    .third_bar{
    background:#000000;
    position: relative;
}

    Even after doing this your footer will have maybe 20px or so space below it because their is not enough content above it. If you want your footer to always stay at bottom in any device then add this to your footer's css.

    .footer{
    position:fixed;
    background: #000000;
    color: #ffffff;
    bottom:0px;
  width:100%;
}

    If you go through with all three changes this is what your page will look like :

    function active(){ 
		var search_bar= document.getElementById('search_bar'); 
	if(search_bar.value == 'Search'){ 
	search_bar.value='' 
	search_bar.placeholder= 'Search' 
	}	 
} 

	function inactive(){ 
		var search_bar= document.getElementById('search_bar'); 
	if(search_bar.value == ''){ 
	search_bar.value='Search' 
	search_bar.placeholder= '' 
	}	 
}
    body {
	background: #efefef;
	margin: 0 auto;
	font-family: Verdana,Arial,sans-serif;
}

#container{
	display:flex;
	flex-direction:column;
	height:100vh;
	overflow:hidden;
	background-color:black
}

.top_section {
	background:#000000;
	padding: 20px;
}

.first_image{
  position: relative;
  text-align: center;
}
.nav_bar {
	background: #222b2f;
	border: 10px; solid #222B2F;
	font-size: 18px;
	font-weight: bold;
	text-transform: none;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.nav_bar a{
	position: relative;
	color:#ffffff;
	text-decoration:none;
	padding: 20px;
}

.nav_bar a:hover{
	color: #ffffff;
	text-decoration:underline;
}

.third_bar{
	background:#000000;
	position: relative;

}

.second_image{
	position: relative;
	text-align: center;
	height:80vh;
	background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}

#search_bar
{
	position: relative;
	bottom: 50px;
	height: 150px;
	border:1px solid #000000;
	border-right: none;
	font-size: 36px;
	padding: 10px;
	outline:none;
	width: 800px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-botton-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft:10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	right:110px;
}

#search_button
{
	position: relative;
	width: 200px;
	bottom: 222px;
	height: 172px;
	border: 1px solid #000000;
	font-size: 36px;
	padding: 10px;
	background: #f1d826;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	-webkit-border-top-right-radius:10px;
	-webkit-border-botton-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright:10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	left: 710px;
}

#search_button:hover
{
background:#f6e049;
}



.form{
	width:200px;
	margin-top: -300px;
	padding-left:280px;

}

.footer
{
	position: fixed;
	background: #000000;
	color: #ffffff;
	bottom: 0px;
  width:100%;

}
.copyright
{
position: relative;
bottom: -8px;
left: 0px;
overflow: hidden;
}

.footer_notes

{

position: relative;
text-align: center;
bottom: 10px;
margin-left: 100px;
overflow: hidden;

}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> 

	<div class="top_section"> 
		<div class="first_image"> 
		<a href="#"><img src="logo.png"/></a> 
		</div> 
	</div> 

	<div class="nav_bar"> 
	<a href ="#"> Home</a> 
	<a href ="#"> Search</a> 
	<a href ="#"> About us</a> 
	<a href ="#"> Products & Pricing</a> 
	<a href ="#"> Contact us</a> 
	<a href ="#"> login</a> 
	</div> 

	<div class="third_bar"> 
		<div class="second_image"> 
		</div> 
		<div class="form"><form action= "search.php" method="post"> 
			<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="search_button" value="Go!"/> 
			</form>	 
			</div> 
	</div> 
			 
	<div class="footer"> 
		<div class="copyright"> 
		&copy test.com &reg 
		</div> 
		<div class="footer_notes"> 
		test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet. 
		</div> 
	</div> 
	 
</div>