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

Challenges with Internal Styling on Wordpress Sites

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

Click on the radio button to delete all selected entries in the option dropdown

Implementing CSS counter-increment with jQuery

Creating a Fixed Footer with CSS

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Disabling hover effects in Chart.js: A step-by-step guide

The magic of CSS Pseudo-classes in Inline Styling

CSS to Reverse Align Navigation Bar Text

Performing a search in Django using raw MySQL commands

Utilize jQuery to find elements based on a specific attribute containing a certain value

What is the best method for creating a loop script within a widget using script?

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

Looking to adjust the alignment in BootsFaces? Want to move the final link of the navbar to the right corner?

Initiate an Ajax call to pre-fetch video content

What is the best way to use shortcodes to display custom fields for post objects, specifically products, within WordPress posts

How to align the last item in the bottom row using Flexbox styling

The function of style.marginRight differs from that of style.marginLeft

The scrollbar is shifting the page's content towards the left