What steps can I take to correct the footer positioning to appear below the sidebar?

I'm currently struggling with the placement of my sidebar on top of my footer, which is not where it belongs. I would like to move it to the bottom. Take a look at this image for a visual representation of what I'm aiming for.

footer {
  padding: 20px;
  margin: 20px;
  text-align: center;
}

#side {
  width: 19%;
  height: 100%;
  position: absolute;
  margin: 20px;
  right: 0;
}
<main>
  <div id="side">
    hello
  </div>
</main>
<footer>
  <a href="#">About us</a>
  <a href="#">Contact us</a>
</footer>

htmlcss

Answer №1

If you're looking for a solution, this code snippet might do the trick. However, I highly suggest utilizing CSS Grid and Flexbox instead.

main {
    height: 100vh;
}

#side {
    width: 19%;
    height: 100%;
    margin: 20px;
    float: right;
    background-color: red;
}
footer {
    padding: 20px;
    margin: 20px;
    text-align: center;
    background-color: green;
}

To further your understanding, these two resources are valuable:

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/css-grid-replace-flexbox/

Answer №2

Ensure this solution suits your needs and adjusts to different content by enclosing it within div elements and aligning them using float.

HTML

<div>
<main>
    <div id="side">
        hello fd sdgsdfgsdg sdfg sdfgfsdg sfdg fsdg sdfg sfdg sdfgsdfgfsd gsdfg
    </div>
</main>
<footer>
<div id="footer">
    <a href="#">About us</a>
    <a href="#">Contact us</a>
    </div>
</footer>
</div>

CSS

  footer {
  padding: 20px;
  margin: 20px;
  text-align: center;
}
#side {
  width: 19%;
  height: 100%;
  margin: 20px;
  right:0;
  float: right;
  clear: right;
}

#footer{
  float: center;
  clear: right;
}

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

Adding a div element to the canvas and generating a DataURL is currently experiencing technical difficulties

My task involves displaying an image with two div elements placed above it - one containing an image and the other containing text. I need to combine these three elements to create a final image and store it in a database/server. To achieve this, I am usin ...

htmlangularjscanvasionic-frameworktodataurl

The tabbing feature in bxslider disrupts the alignment of slides, making it

After encountering accessibility issues, I upgraded the bxslider library to version 4.2.3 for better support. Check out this example of bxslider where you can easily tab through the controls: http://jsfiddle.net/qax7w8vt/2/embedded/result/ The problem a ...

javascriptjqueryhtmlbxslider

Styling Easy-Autocomplete with jQuery

I am currently working on integrating autocomplete functionality using the jquery easy-autocomplete plugin npm install --save easy-autocomplete I am facing two issues related to its styling. The results are being displayed in a bulleted list format. I ...

jquerycssbootstrap-4laravel-8easyautocomplete

Enter the [color] HTML5 code and check for compatibility with all the latest web browsers

I am interested in implementing a color picker functionality using the input[color] element in HTML5. I would like to confirm if this method is compatible with all modern browsers. Additionally, I am curious if there are alternative ways to achieve this, ...

htmlbrowser

Enhance webpage speed by enabling browser caching for embedded iframe CSS and Javascript files

Imagine having a file named main.html. Inside this file, there's an iframe that points to another file called sub.html. Additionally, there's a button on main.html that, when clicked, refreshes the content of sub.html. This sub.html file relies o ...

jqueryhtmlcachingiframe

WordPress Header Display Issue on Mobile and Tablet Devices: What You Need to Know

I'm facing an issue with the header and footer being cut off on mobile devices. When viewed on a tablet or phone, the header doesn't display across the full width of the screen. This problem arises because the Wordpress theme was created in 2010 ...

csswordpressmobile

Why is the value returned by getBoundingClientRect 190 when the y attribute is set to 200 in SVG?

When placing textBox1 at a y-position of 200, getBoundingClientRect is returning a value of 190. What could be causing this discrepancy? For more details and code snippets, please refer to the following link: https://codepen.io/anon/pen/REKayR?editors=101 ...

javascripthtmlsvg

Tips for resolving the issue of the symbol ' displaying as &#39 in an Angular 2 application

I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as &#39 instead. I managed ...

javascripthtmlangularkendo-gridjql

What is the best way to apply a class to the 'td' element for two specific columns?

I have a rendered row from a database echo "<table border='1' cellpadding='10'>"; echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th></th> <th></th> ...

phpcssclasshtml-table

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

Can a mobile device be programmed to automatically bring up the keyboard for the autofocus element?

Currently utilizing Meteor for my project and facing an issue with a "Add new" button. When clicked, the button disappears and is replaced by a text box. The toggle logic between the button and input is complex and not relevant here. Check out the HTML co ...

htmlmeteorautofocus

Creating a pull-up toolbar with just HTML and CSS for an Android browser

I need to create a draggable toolbar on my mobile webapp that can reveal content beneath it. I want to achieve this using just HTML/CSS, without relying on touch/scroll events or libraries. To do this, I'm overlaying a scrolling element on top of the ...

androidhtmloverflowz-indexandroid-browser

Tips on ensuring the first column of an HTML table remains fixed in responsive design

I am trying to create a responsive HTML table where the first column remains fixed. I have a select box on my PHP page and I am using AJAX to display data from a database in the HTML table. However, when selecting a value in the select box in a responsiv ...

phphtml

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

Issue with transition not functioning properly on a rotated CSS3 element

Having a bit of trouble with my CSS class: .rotate { -webkit-transition: all 2s ease-in-out; -webkit-transform : rotateY(360deg); } When I change the rotation to 180deg and apply the class using jQuery, the div rotates instantly instead of over a 2 s ...

jquerycss

Is it beneficial to rotate an image before presenting it?

I am looking for a way to display a landscape image in portrait orientation within a 2-panel view without altering the original file. The challenge I am facing is that the image size is set before rotation, causing spacing issues with DOM elements. Is ther ...

javascripthtmlcssreactjs

Is there a way to position the text within an email body at the center using SendGrid?

I've been working on creating an email newsletter template using SendGrid, and I've run into a formatting issue where the content doesn't align properly in the email body. The image below shows how it's appearing incorrectly. Does anyon ...

htmlcsssendgrid

dynamically adjust table cell width based on number of rows

My HTML structure is as follows: <table border=1 > <tr> <!--this tr has one <td> that needs to be 100% width--> <td></td> </tr> <tr> <!--this tr has two <td> that each need to be ...

javascriptjqueryhtmlcss

QuickFit, the jQuery plugin, automatically adjusts the size of text that is too large

I have incorporated the QuickFit library into my website to automatically resize text. However, I am running into an issue where the text is exceeding the boundaries of its containing div with a fixed size. This is something I need to rectify. This is ho ...

javascriptjqueryhtmlcsstext

"Troubleshooting: Why isn't my Tailwindcss box shadow

I'm currently incorporating Tailwindcss into a React project to recreate the Star Wars website mobile menu. However, I am facing an issue where the box shadow added to the hamburger icon segments is not visible when the navigation drawer is opened. A ...

cssreactjsjsxtailwind-css