divs aligned vertically on opposite edges of the webpage

Question

divs aligned vertically on opposite edges of the webpage

Our web app is being embedded in a third party page as an iframe, but we need to add a bottom "toolbar" with 2 links. One link should be plain text and the other should display our company logo preceded by some text. We want the two links to be positioned in opposite corners of the toolbar div and be vertically aligned in the middle. I've made some progress using this method. Here's what I have so far on Fiddle:

<div id="main-app"></div>

<div id="my-footer">
  <span id="full-link" class="assert-position"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </span> <div id="filler" class="assert-position"></div> Powered by
  <a href="http://www.company-landing-page.co.uk" target="_blank" class="assert-position"> <img src="/images/my-company_logo.png"/></a>
</div>
<style>
     *{
       margin: 0;
       padding: 0;
     }

      html, body {
        height: 100%;
      }

      #main-app {
          height: 90%;
          width: 100%;
      }

      #my-footer {
        height: 10%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        float: left;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      .assert-position{
        display: inline-block;
        vertical-align: middle;
      }

      #full-link a:visited{
        color: #FFF
       }
</style>

I'm having trouble vertically aligning the link on the left properly while maintaining horizontal alignment. As a backend developer, this front-end challenge is frustrating me. I don't want to use any third-party libraries like Bootstrap as they may interfere with my existing dependencies.

html css vertical-alignment

Answer 1

Answer №1

TRY IT OUT: http://jsfiddle.net/kbjycez2/68/

To center your links vertically, it is necessary to set the line-height for your #my-footer element.

I have utilized the flex model to position your links on the left and right sides.

You can test the following code snippet:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#main-app {
  height: 90%;
  width: 100%;
}

#my-footer {
  height: 10%;
  width: 100%;
  background-color: #0f0f0f;
  color: #FFF;
  display: flex;
  font-family: Tahoma, Arial, "sans-serif";
  justify-content: space-between;
  line-height: calc(10vh);
}

#my-footer img {
  vertical-align: middle;
}

#full-link a:visited {
  color: #FFF
}

<div id="main-app"></div>

<div id="my-footer">
  <div>
    <a href="https://url.to.webapp">View Full Size</a>
  </div>
  <div>
    <span>Powered By </span>
    <a href="http://www.company-landing-page.co.uk"><img src="/images/my-company_logo.png" /></a>
  </div>
</div>

Answer 2

TRY IT OUT: http://jsfiddle.net/kbjycez2/68/

To center your links vertically, it is necessary to set the line-height for your #my-footer element.

I have utilized the flex model to position your links on the left and right sides.

You can test the following code snippet:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#main-app {
  height: 90%;
  width: 100%;
}

#my-footer {
  height: 10%;
  width: 100%;
  background-color: #0f0f0f;
  color: #FFF;
  display: flex;
  font-family: Tahoma, Arial, "sans-serif";
  justify-content: space-between;
  line-height: calc(10vh);
}

#my-footer img {
  vertical-align: middle;
}

#full-link a:visited {
  color: #FFF
}

<div id="main-app"></div>

<div id="my-footer">
  <div>
    <a href="https://url.to.webapp">View Full Size</a>
  </div>
  <div>
    <span>Powered By </span>
    <a href="http://www.company-landing-page.co.uk"><img src="/images/my-company_logo.png" /></a>
  </div>
</div>

Answer 3

Answer №2

Dealing with vertical alignment can be quite tricky. The method described in the link seems a bit complex to me.

Personally, I opt for a simpler approach by using absolute positioning on a div with the following CSS properties:

{
    top:50%;
    transform:translateY(-50%);
}

To ensure this works correctly, the parent element (in this case, my-footer) must have position:relative.

The benefit of this method is that it doesn't require an additional "filler" div or any extra elements. In my solution, I have created a class called "vAlign" with the mentioned attributes. Then, I add "left:5px" and "right:5px" in the CSS for each footer element (I assigned "company-link" ID to the 'Powered by' section), eliminating the need for floating elements. Additionally, I increased the height of the footer to make the vertical alignment more visually apparent.

     *{
       margin: 0;
       padding: 0;
     }
    
      html, body {
        height: 100%;
      }

      #main-app {
          height: 70%;
          width: 100%;
      }

      #my-footer {
        position:relative;
        height: 30%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        left:5px;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      #full-link a:visited{
        color: #FFF
       }
       
      #companyLink {
        right:5px;
      }
       
      .v-align {
         position:absolute;
         top:50%;
         transform:translateY(-50%);
      }

<div id="main-app"></div>

<div id="my-footer">

  <div id="full-link" class="v-align"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </div>
  
  <div id="companyLink" class="v-align">Powered by <a href="http://www.company-landing-page.co.uk" target="_blank"><img src="/images/my-company_logo.png"/></a><div>
  
</div>

Answer 4

Dealing with vertical alignment can be quite tricky. The method described in the link seems a bit complex to me.

Personally, I opt for a simpler approach by using absolute positioning on a div with the following CSS properties:

{
    top:50%;
    transform:translateY(-50%);
}

To ensure this works correctly, the parent element (in this case, my-footer) must have position:relative.

The benefit of this method is that it doesn't require an additional "filler" div or any extra elements. In my solution, I have created a class called "vAlign" with the mentioned attributes. Then, I add "left:5px" and "right:5px" in the CSS for each footer element (I assigned "company-link" ID to the 'Powered by' section), eliminating the need for floating elements. Additionally, I increased the height of the footer to make the vertical alignment more visually apparent.

     *{
       margin: 0;
       padding: 0;
     }
    
      html, body {
        height: 100%;
      }

      #main-app {
          height: 70%;
          width: 100%;
      }

      #my-footer {
        position:relative;
        height: 30%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        left:5px;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      #full-link a:visited{
        color: #FFF
       }
       
      #companyLink {
        right:5px;
      }
       
      .v-align {
         position:absolute;
         top:50%;
         transform:translateY(-50%);
      }

<div id="main-app"></div>

<div id="my-footer">

  <div id="full-link" class="v-align"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </div>
  
  <div id="companyLink" class="v-align">Powered by <a href="http://www.company-landing-page.co.uk" target="_blank"><img src="/images/my-company_logo.png"/></a><div>
  
</div>

divs aligned vertically on opposite edges of the webpage

Answer №1

Answer №2

Similar questions

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

Utilizing Element IDs for JQuery Tab Implementation

What are the best methods for visually comparing two HTML documents?

Internet Explorer experiencing printing issues

Options for regular expressions in CSS: match letters regardless of case and search for all occurrences

Choose a group of radio buttons inside a container when a button is clicked

Deliver real-time notifications to linked users by leveraging socket.io and node.js

Discover the elusive tag that holds the specified text

Start CSS3 Animation Automatically

Run a function continuously while a key is being held down

What is the best way to adjust the z-index when hovering over an li element

Locate a URL within a Java string and generate an HTML hyperlink tag

I'm looking to properly position my logo, header, and paragraph within the jumbotron using Dash Bootstrap

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Customize chrome's default shortcuts with JavaScript

React is unable to locate an import statement for Material UI components

The toggle feature doesn't seem to be working properly in Bootstrap 5

Challenges with Bootstrap input groups

Steps for dynamically adjusting form fields depending on radio button selection

Modify the CSS of the gauge element without causing any issues