Footer elements are divided into two sections, one on the left side

Below is the code snippet I have 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;
}

The issue with this setup is that all the elements are grouped in the corners even though they are supposed to be split. Any solutions for this? (SCREENSHOT)

htmlcss

Answer №1

I restructured your code to improve the layout by moving the "LI"s out of the "position:fixed" styling and wrapping them in a fixed position container instead. Check out the updated CSS below along with a demo link at the end.

.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;
}
<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>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a simple text and javascript be used to create a register/login "database"?

For a school project, I am working on creating a cross-browser login script without using PHP or MySQL. I want the registration process to store usernames and passwords in a plain text file, and the login process to check that file for matches. I acknowled ...

javascripthtmlauthentication

The colors of my SVG button remain constant and do not dynamically change when I hover over it

I am facing an issue with a button that contains an SVG element. In my CSS, I have defined styles to change the color of the icon and the SVG when hovered over. However, I noticed that I have to directly hover over the SVG itself for the color to fill. As ...

htmlcsssvgbuttonhover

"Enhancing user experience by implementing Google Places Auto Complete feature that dynamically adjusts input

I have encountered an issue while using the react-places-autocomplete package. Every time I type something into the input field and suggestions appear, the entire input field jumps up, which disrupts the overall appearance. Is there a way to prevent the ...

cssreactjsgoogle-places-autocompletereact-google-places-autocomplete

Determine if a file input is linked in React.js Material UI

Currently, I am working with a Material UI <TextField /> component that has a type=file prop to allow file attachments. My goal is to trigger an event when a file is attached to this TextField. However, my search results only provided JQuery soluti ...

javascripthtmlreactjsinputmaterial-ui

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

Optimal guidelines for logging in

After successfully creating a website using HTML, CSS, and JavaScript, I am now looking to implement a login feature to provide privacy for certain users. I have noticed that some developers use PHP, while others use JS or Node.js for this purpose. However ...

javascripthtmlnode.jsauthentication

What causes my mobile website to scroll to the left with excessive white space?

I can't seem to figure out why the portrait mobile version of my website keeps scrolling way off to the left! Even after removing the large header image, the width still goes off screen to the right! I've tried applying the common viewport code ...

androidhtmlcssmobileresponsive-design

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

Generating Speech from Text using jQuery API in HTML

Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...

javascriptjqueryhtmlcsstext-to-speech

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

htmlcssbootstrap-5

Deactivate user input in Knockout Kendo TimePicker

Is it possible to prevent user input in the Kendo UI TimePicker while using knockout-kendo binding? In a previous project without knockout-kendo, I was able to achieve this by using the following code (see jsfiddle example): $('#timepicker').at ...

javascriptjqueryhtmlknockout.jskendo-ui

As the screen width shrinks, I've noticed that my grid system in HTML using Bootstrap starts to glitch

Why is my row going onto a second line when I shrink the width? Here is a screenshot of the issue. I am currently using bootstrap 5 for this and I am unsure how to fix it. Below is the code snippet: Current Screenshot Below is the desired look on mobil ...

htmlcssbootstrap-5

The occurrence of a single insertion taking place while the page is being rendered

Currently, I am working on a code that involves inserting data into a database before any further action takes place. This initial insertion serves as a save point from which I can then pull the ID and perform additional inserts based on that ID. Essential ...

phphtmlmysqlsqlmysqli

Having trouble with a basic API Get request?

I'm trying my hand at making a simple get request to fetch a random quote from an API. When I hardcode the change of the quote on button click, everything works smoothly. $(document).ready(function() { $("#quotebtn").on('click', functio ...

javascripthtmlajax

Optimal technique for implementing up and down arrows in a select dropdown

What's the most effective way to implement a percentage arrow up/down slider/selector within a select element on a webpage like this: https://i.sstatic.net/ygu55.png Should we use a select list with a dedicated background? If so, how do we detect i ...

javascriptjqueryhtmlcss

Angular ng-click feature for a dropdown option element

Check out this jsfiddle link: http://jsfiddle.net/cuycbxxp/ Within this dropdown selection, you can choose between names and numbers. Once you select a name and then select a number from the dropdown, a function is executed and an output is displayed in ...

javascripthtmlangularjsangularjs-ng-click

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

What is the best way to save an XPath as a variable when using Python Selenium?

My goal is to select text on a website, save it, and then convert that stored information into a variable. Specifically, as shown in the image below, I want to copy the selected name (in this case, John J. John), turn it into a variable, and then print it ...

htmlpython-3.xseleniumxpath

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

htmlcsscss-floatz-index

Modifying the background color in HTML to match user input: A step-by-step guide

Currently, I am in the process of developing my website to allow users to choose a color using a color selector tool. Once they select a color, the background of the webpage will change accordingly. Here is my current progress: function adjustColor() { ...

javascripthtmlbackground