bjskistad bjskistad - 2 months ago 5
CSS Question

Footer elements split left and right

I've got this code for a footer:

<ul>
<ul class="footer">
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
<li><a href="/help">Help</a></li>
<ul class="right">
<li><a href="/newsletter">Newsletter</a></li>
<li><a href="/signin">Sign In</a></li>
<li><a href="/terms">Terms</a></li>
</ul>
</ul>
</ul>


CSS:

ul {
list-style-type: none;
padding: 0;
overflow: hidden;
bottom: 0;
}

li {
position: fixed;
bottom: 0;
left: 0;
}

.right li{
position: fixed;
bottom: 0;
right: 0;
}

li a {
font-family: Helvetica;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}


It displays the code at the bottom and splits them in the middle. But they are all grouped in the corners. Is there a fix for this? (SCREENSHOT)

Answer

I cleaned up your code and regrouped things a bit better for this layout. The biggest problem was you had the "LI"s "position:fixed". You want to have a wrapper around them which is "position:fixed". I included a jsfiddle demo link at the bottom.

<div class="footer">
  <ul class="left">
    <li><a href="/contact">Contact</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/help">Help</a></li>
  </ul>
  <ul class="right">
    <li><a href="/newsletter">Newsletter</a></li>
    <li><a href="/signin">Sign In</a></li>
    <li><a href="/terms">Terms</a></li>
  </ul>
</div>

css:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: block;
}

ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  width: 50%;
  float: left;
}

ul.left li {
  float: left;
  display: inline;
}

ul.right li {
  float: right;
  display: inline;
}

li a {
  font-family: Helvetica;
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

demo: https://jsfiddle.net/NYCguyJason/3ogsjs4t/1/

Comments