BCH BCH - 2 months ago 10
CSS Question

Relatively positioned fixed height footer is covering the absolute div before it.

I've tried margin-bottom and min-height on my body tag with the same height as the footer. The footer container called .contact is not respecting the div .store-items above it. I'm looking for a clean fix, eventually I will learn about flex boxes but I am suspicious there is a simple error in my strategy. Thanks, here is the code:

/*=================
Start of Rules after reset
===================*/
body{
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}

/*
================================
Body
================================
*/
.store-items {
margin-left: 20px;
margin-right: 20px;
width:900px;
max-height: 900px;
border: solid 1px;
position: absolute;
padding: 30px;
padding-left: 65px;
display: block;

}
.store-items .item-1-3 {
display: inline-block;
width:30%;
margin-right: 20px;
margin-bottom: 20px;

height:300px;
border: solid 1px;
background-color:#333333;
position: relative;
}
.store-items .item-1-3 img{
height: 190px;
width: 150px;
position: relative;
width:100%;
}
.store-items .item-1-3 h3{
text-align: center;
color:white;
position: relative;
top: 7px;
}
.store-items .item-1-3 p{
position: relative;
left:170px;
top:15px;
border:solid 1px black;
width:40px;
background-color: white;
z-index: 1;

}


/*
================================
Footer
================================
*/
.contact {
position: relative;

width:100%;
left:0;
bottom:0;
height:70px;
display: block;
}


<!DOCTYPE html>
<html>
<head>
<title>The Viking Store</title>
<link rel="stylesheet" type="text/css" href="vkhmp.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>

<body>
<header>
<div class="navbar">
<a href="vikingstore.com" class="vks">Viking Store</a>
<div class="cart">
<a href="vikingstore.com"><img src="resources/noun_355_cc.svg" alt="shopping cart" style="width:32px; height:32px;"></a>
<a href="vikingstore.com/cart">Your Cart</a>
</div>
</div>

<div class="header-image">
<a href="vikingstore.com"><img src="resources/viking_ship_background_medium.jpg" alt="viking ship background"></a>
<h1>The Viking Store</h1>
</div>

<div>
<div class="tagline1">
<p>The Best Viking Gear on the Whole Web</p>
</div>

<div class="tagline2">
<p>Choose from among our lineup of fine axes below</p>
</div>
</div>
</header>


<div class="store-items">
<div class="item-1-3">
<h3>The Silent Night</h3>
<p>$200</p>
<img src="resources/axe_silent_night_small.jpg" alt="The Silent Night">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--

--><div class="item-1-3">
<h3>The Dainty Daisy</h3>
<p>$100</p>
<img src="resources/axe_dainty_daisy_small.jpg" alt="The Dainty Daisy">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--

--><div class="item-1-3">
<h3>Double Trouble</h3>
<p>$340</p>
<img src="resources/axe_double_trouble_small.jpg" alt="Double trouble">

<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--

--><div class="item-1-3">
<h3>Whispering Wind</h3>
<p>$225</p>
<img src="resources/axe_whispering_wind_small.jpg" alt="Whispering Wind">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--

--><div class="item-1-3">
<h3>The Cunning Cutter</h3>
<p>$200</p>
<img src="resources/axe_cunning_cutter_small.jpg" alt="The Cunning Cutter">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--

--><div class="item-1-3">
<h3>The Kingmaker</h3>
<p>$400</p>
<img src="resources/axe_kingmaker_small.jpg" alt="The Kingmaker">
<div>
<input type="submit" value="Add to Cart">
</div>
</div>
</div>
<div class="pagination"></div>




</body>
<footer>
<div class="contact">
<h2>Contact</h2>
<img src="resources/noun_14614_cc.svg" alt="horn call" style="height:32px; width:32px;">
1-000-000-000
<img src="resources/noun_631009_cc.svg" alt="scroll email" style="height:32px; width:32px;">
<h2>contact@vikingstore.com</h2>
</div>
</footer>




</html>

Answer

As K. Daniek wrote, you closed the bodytag before the footer, Apart from that, there is a lot of unnecessary code - no need for all this absolute and relative positioning - use margins for creating distances and leave the position settings at the default.

Here's a codepen: http://codepen.io/anon/pen/BLJxyk

Here's the changed CSS:

body {
  font-family: Open Sans;
  margin-bottom: 70px;
  min-height: 500px;
}

.store-items {
  margin-left: 20px;
  margin-right: 20px;
  width: 900px;
  max-height: 900px;
  border: solid 1px;
  padding: 30px;
  padding-left: 65px;
}

.store-items .item-1-3 {
  display: inline-block;
  width: 30%;
  margin-right: 20px;
  margin-bottom: 20px;
  height: 300px;
  border: solid 1px;
  background-color: #333333;
  position: relative;
}

.store-items .item-1-3 img {
  height: 190px;
}

.store-items .item-1-3 h3 {
  text-align: center;
  color: white;
  margin-top: 7px;
}

.store-items .item-1-3 p {
  left: 170px;
  margin-top: 15px;
  border: solid 1px black;
  width: 40px;
  background-color: white;
}

.contact {
  height: 70px;
  display: block;
}
Comments