Ensure the bottom div is anchored with a top margin

I am attempting to design a contact/information section at the bottom of my webpage, similar to the grey area at the bottom of this site.

Here is my HTML code:

*{margin:0;
padding:0;
box-sizing: border-box;}

body{
padding-bottom: 0;
}

body .main{
margin-bottom: 10vh;
}

body p{
font-size:medium;
}

h1{
font-size: x-large;
}

#contact-info{
width:100%;
}

#contact-body{   
background-color: rgb(94, 94, 91);
color: #fff;
margin: 0 auto;
width: 100%;
}

table td{
font-size: small;
white-space: nowrap;
}
<body>
  <div class="main">
    <legend class="border-bottom">
      <h1> Who are we?</h1>
    </legend>

    <p>
        Some text
    </p>
  </div>
  
  <div id="contact-body">
    <div id="contact-info">
      <table style="table-layout:fixed;">
        <tr>
          <th>Email</th>
  
        </tr>
        <tr>
          <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472e29212807222a262e2b6924282a">[email protected]</a></td>
  
        </tr>
      </table>
    </div>    
  </div>
</body>

I have experimented with various methods; such as using display:absolute (with display:relative on body), but this causes the contact-body and main sections to overlap in landscape mode. Adding a top-margin to contact-body did not resolve the issue.

When I remove display:absolute, the div aligns in the center with some space below. I have attempted to use margin-bottom:0, padding-bottom:0 on contact-body and body without success.

How can I create a contact/information section at the bottom that spans the entire width and maintains a specific margin (e.g. 1vh) from the section above?

Answer №1

To ensure that an element stays fixed at the bottom of the page, simply add the CSS properties position: fixed and bottom: 0 to the element with the ID contact-body. This will anchor it to the bottom of the viewport. If you wish to achieve the same effect with a different HTML element, you can experiment with adding the position and bottom properties to that specific element. Keep in mind that this will permanently fix the element at the bottom of the page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-bottom: 0;
}

body .main {
  margin-bottom: 10vh;
}

body p {
  font-size: medium;
}

h1 {
  font-size: x-large;
}

#contact-info {
  width: 100%;
}

#contact-body {
  background-color: rgb(94, 94, 91);
  color: #fff;
  margin: 0 auto;
  width: 100%;
  position: fixed;
  bottom: 0;
}

table td {
  font-size: small;
  white-space: nowrap;
}
<div class="main">
  <legend class="border-bottom">
    <h1> Who are we?</h1>
  </legend>

  <p>
    Som text
  </p>
</div>

<div id="contact-body">
  <div id="contact-info">
    <table style="table-layout:fixed;">
      <tr>
        <th>Email</th>

      </tr>
      <tr>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b52555d547b5e565715585456">[email protected]</a></td>

      </tr>
    </table>
  </div>

</div>

Answer №2

Here's a suggestion: try incorporating semantic tags into your website so that it's more accessible to everyone.

* {
  margin: 0;
  padding: 0;
}
main {
  margin-bottom: 4rem;
}

footer {
  position: fixed;
  bottom: 0;
  background-color: gray;
  width: 100vw;
  height: 3rem;
  /* extra */
  padding: 0 1rem;
  display: flex;
  align-items: center;
  /* debug */
  border: 2px dashed;
}
<html>
<body>
  <main>
    <p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
  </main>
  <footer>
    <address>
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69c9f9bb68499959dd895999b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81ebe8ecc1f3eee2eaafe2eeec">[email protected]</a></a><br>
      <a href="tel:+13115552368">(311) 555-2368</a>
    </address>
  </footer>
</body>
</html>

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

What is the method for obtaining the CSS text content from an external stylesheet?

I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...

How can I use JQuery to sum up the numbers within div elements?

Is there a way to automatically number the generated blocks? For example, the first block would display "1", the second "2" and so on. Below is my current code. Simply input the desired number of blocks in the input field. <!DOCTYPE html> <html ...

Tips on how to transform an <input type="text"> element into a <tr> element using jquery

I am currently working on updating a row using jQuery Ajax. Whenever the Edit button is clicked, it switches the <tr> element to <input type='text'>. I have utilized the .Change method which triggers successfully, but my goal is to r ...

Loading logos dynamically using Jquery upon selection of an option

In the form I created, there is a dropdown logo selection at the bottom. The options in the dropdown are populated from folders in the root directory using the following code: $dirs = glob('*', GLOB_ONLYDIR); Each of these directories contain ...

What are some ways to create a responsive image design?

Currently, I am using the code below to enlarge an image when clicked on. I have attempted using media queries in CSS... I have also added another class in #modalPopupHtml# to adjust the size of the large image: .imgsize{ height: 600px; width: 800px; ...

What could be causing my file input to appear misaligned?

Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

Display a tooltip when the cursor hovers close to a line in D3 visualizations

Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip. https://i.sstatic.net/kYpeg.png https://jsfiddle.net/jhynag08/38/ However, I would like the tooltip to appear when user ...

Tips for aligning buttons vertically within the form-row class in Bootstrap 4

I'm facing an issue where I cannot get a set of buttons in line with labels when using different column widths in Bootstrap. The behavior of a button assigned to a specific column width, like col-3, is not the same as a button assigned with automatic ...

How can I retrieve a text file using an API in a Next.js application?

Is there a way to download a text file using an API in Next.js? The console.log(ninjas) function is already displaying the correct information. I have tested the API with Postman and it works perfectly. When I use GET in Postman, the same information is ...

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

Creating input fields using Vuejs

Currently, I am learning how to incorporate HTML content rendering in Vuejs. I'm experimenting with creating a small input component that is generated through the render function. Here is a snippet of what I have so far: export default { name: &qu ...

A guide on utilizing Xpath to reference a tag within a class

Trying to obtain the website link by using xpath and selenium with a reference to the class pv-contact-info__contact-type ci-websites. [Here is the html snippet being referenced][1] sel = Selector(text=driver.page_source) website = sel.xpath("//*[@class= ...

The combination of Backbone.js and underscore.js is causing disorganized HTML code

When it comes to creating HTML elements, I typically use a combination of backbone.js and underscore.js. Here is an example snippet from my usual workflow: _.template($('#html-container').html(), this.model.toJSON()); I then append this code wh ...

Vertically align all items within the div using Bootstrap to achieve perfect centering

I've been working on centering everything within this div vertically, and I've encountered some challenges along the way. Initially, I ensured that my background view extends my container nicely across the screen. Now, I'm looking to create ...

Classic leading and CSS line-height traditional styling

The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text. This significantly differs from the traditional concept of leading, where spacing is ...

Achieving the Menu Hover Effect - step by step guide to recreating this stylish effect

I recently came across a stunning hover effect on the main menu of a website (red rectangles above menu). It's quite impressive! I found it here: Now, I want to incorporate this same effect into my own website. Unfortunately, there doesn't seem ...

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

HTML various button designs - such as a cogwheel

I need a button on my Angular/Electron project that resembles a gear icon. I came across these resources: here and here. However, when I tried to implement them, they didn't work as expected. Currently, the button looks like this: <button class= ...

What is the best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...