issue: href links on top of each other

Question

The href links on my website are directly on top of each other - instead of being vertically on top of each other. I tried adding 'positon: relative' but it didn't work.

Here's the HTML:

 div.footer { background-color: #8dcab3ff; /* Dark Teal */ color: #ffffff; /* White */ padding: 25px 0px; width: fill; display: block; overflow: hidden; box-sizing: border-box; } div.inner_footer { display: block; margin: 0 auto; height: 100%; }.inner_footer.logo_container { width: 30%; float: left; display: block; height: 100%; }.inner_footer.logo_container img { width: 60%; height: auto; }.inner_footer.footer_third { width: calc(21.666667% - 20px); float: left; height: 100%; text-align: right; display: block; }.inner_footer.footer_third:last-child { text-align: right; }

 <div class="footer"> <div class="inner_footer"> <.-- Footer content starts here --> <div class="logo_container"> <img src="images/14_logo.png"> </div> <div class="footer_third"> <h5>Information <h5> <a href="#"> Privacy Policy </a> <a href="#"> Copyright</a> </div> <!-- Footer content ends here --> </div> </div>

Answer 1

Try This, Html:

<ul id="mainMenu">
  <li><a href="#"> Privacy Policy </a></li>
  <li><a href="#"> Copyright</a></li>
</ul>

CSS:

#mainMenu {
  margin: 10px;
  width: 900px;
  font-family: sans-serif;
}
#mainMenu li {
  display: block;
  width: 120px;
  float: left;
  margin-left: 2px;
  border: 1px solid #000;
}

#mainMenu a {
  display: block;
  padding: 3px;
  text-decoration: none;
  background-color: #fff;
  color: #009;
}

#mainMenu a:hover {
  background-color: #009;
  color: #fff;
}

Answer 2

If you want your tags to be next to each other, you need to allow space for them to be next to each other. At the moment, you only have a width of 21.66%Maybe post a screenshot if that is not what you mean or need

 div.footer { background-color: #8dcab3ff; /* Dark Teal */ color: #ffffff; /* White */ padding: 25px 0px; width: fill; display: block; overflow: hidden; box-sizing: border-box; } div.inner_footer { display: block; margin: 0 auto; height: 100%; }.inner_footer.logo_container { width: 30%; float: left; display: block; height: 100%; }.inner_footer.logo_container img { width: 60%; height: auto; }.inner_footer.footer_third { width: calc(61.666667% - 20px); float: left; height: 100%; text-align: right; display: inline-block; }.inner_footer.footer_third a { display: inline-block; margin-right: 10px; }.inner_footer.footer_third:last-child { text-align: right; }

 <div class="footer"> <div class="inner_footer"> <.-- Footer content starts here --> <div class="logo_container"> <img src="images/14_logo.png"> </div> <div class="footer_third"> <h5>Information</h5> <a href="#"> Privacy Policy </a> <a href="#"> Copyright</a> </div> <!-- Footer content ends here --> </div> </div>