Horizontal Alignment of DIV Tags

I'm currently working on aligning some div tags to serve as contact links on my website. My goal is for them to be positioned on the right-hand side and aligned in a single line.

Here's how they look at the moment:

Here's the preferred alignment:

Here's the code snippet:

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color: white;
      padding: 5px 10px;
    }
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }
<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>
htmlcsstext-alignment

Answer №1

Have you considered rotating the book-me div for a unique effect (use full screen on snippet below to see transform):

#book-me {
  position: fixed;
  right: 0;
  transform: rotate(90deg);
  transform-origin: top right;
  z-index: 99999;
  bottom: 0;
  background: black;
  color: white;
  padding: 5px 10px;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
}

@media screen and (max-width: 960px) {
  #book-me {
    transform: none;
  }
  #book-me a {
    padding: 5px 10px;
  }
}
<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

Answer №2

<a> tags are specifically used for creating hyperlinks in text, and do not affect the block-level formatting of text. To achieve the desired effect, you can style them as divs instead. It seems from your screenshots that you have already implemented the rotation of text by 90 degrees elsewhere in your code.

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color:white;
      padding: 5px 10px;
    }
    
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }
<div id="book-me">
          <div><a href="tel:############">Call</a></div>, 
          <div><a href="sms:############">Text</a></div>   
          <div>or</div>
          <div><a href="############">WhatsApp</a></div>
        </div>

Answer №3

It seems like the code you've been working on may not be the most efficient solution. I would suggest considering rotating your box instead of trying to achieve the desired effect with this approach.

* {
  margin: 0;
  padding: 0;
}

#book-me {
  position: fixed;
  height: 100%;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

#book-me span {
  transform: translateY(calc(50vh - 50%));
  color: white;
  background: black;
  padding: 5px 10px;
  writing-mode: vertical-rl;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
  writing-mode: vertical-rl;
}

@media screen and (max-width: 960px) {
  #book-me {
    bottom: 0;
    top: initial;
    transform: none;
  }

  #book-me a {
    padding: 5px 10px;
  }
}

p {
  padding: 2em;
  font-size: 2em;
}
<div id="book-me">
  <span>
    <a href="tel:############">Call</a>,
    <a href="sms:############">Text</a> or
    <a href="############">WhatsApp</a>
  </span>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, doloremque!</p>
<p>Expedita fugit dolor amet ipsa voluptatibus, nesciunt eos beatae voluptas.</p>
<p>Vitae sapiente, nihil ea quam, asperiores error aliquam? Mollitia, nobis?</p>
<p>Veniam suscipit explicabo ipsum nobis hic sunt, ea laboriosam obcaecati!</p>
<p>Sunt explicabo consectetur eius ipsam maiores laborum inventore excepturi temporibus?</p>
<p>Blanditiis nulla tenetur, cum, placeat fuga sint sed itaque debitis.</p>
<p>Fugit nobis fuga sit, repellat quae doloremque, dolorum obcaecati suscipit!</p>
<p>Voluptas officiis veritatis excepturi possimus modi eum corporis, ducimus earum!</p>
<p>Dolorem expedita quae, numquam consequatur maiores veniam iure? Minus, quia?</p>
<p>Deserunt fugiat odit repellat impedit perferendis, minus minima. Facere, quidem.</p>

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 are the best ways to enhance change detection efficiency in Angular?

One issue I am facing involves two components and a service. It appears that when moving from the view of a routed component to elements in different components like a matMenu and an input field, the routed component seems to refresh itself. This becomes p ...

htmlangulartypescript

Setting the width of a div element dynamically according to its height

Here is a snippet of my HTML code: <div class="persoonal"> <div class="left"></div> <div class="rigth"></div> </div> This is the CSS code I have written: .profile { width: 100%;} .left { width: 50%; float: le ...

javascripthtmlcss

Displaying a Facebook iframe on the left side of the page

I'm struggling with positioning the Facebook iframe embed to sit on the left of the text. I want it to be aligned with the left margin, but also have the text flow beside it from the same height. Can anyone offer some guidance on how to achieve this u ...

cssvue.jsiframe

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

htmlcssangularjs

The full execution of Jquery show() does not pause until it finishes

Here is the sequence I want to achieve: Show a div element with the CSS class yellow Execute a function for about 5 seconds Remove the yellow class and add the green CSS class "state Ok" However, when running my code, the div container does not appear u ...

javascriptjqueryhtmlcssshow-hide

Obtaining the weight of a webpage using Selenium Automation_Framework

Currently, I am in the process of creating performance-related tools for web pages within a Selenium framework designed for .NET systems. With a focus on page performance, I am specifically analyzing page load time and page weight. In order to measure th ...

performanceseleniumautomationhtml

Try implementing a body template when using the mailto function

Is there a way to customize an HTML template for the mailto() function body? For example, suppose I have the following link: echo "<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f2faf6fefbd7f0faf6fefbb ...

htmlmailto

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

I'm working with some user-generated divs that I want to dynamically highlight when hovered over, while simultaneously blurring the other divs. My challenge is figuring out how to change the style of the hovered div separately from all the others. Th ...

javascriptcss

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

javascripthtmlcss

Script for calculating in PHP

I've scoured the internet in search of a sample script that meets my specific needs, but unfortunately, I have come up empty-handed. Essentially, I am looking to retrieve a value from a div and then multiply that number based on user input. For instan ...

phphtmlcalculator

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml

What is the proper way to structure an Xpath search?

Recently, I've been working with Selenium in QA Test automation. When it comes to selecting/writing Xpath for an element, I've noticed that there are different formats that can be used. For example, protected final String LOGIN_BUTTON_LOCATOR = ...

javahtmlselenium-webdriverxpathformat

Using JavaScript values retrieved from a database to dynamically adjust the options in the second dropdown menu based on the selection made in the

I am currently working on a feature that involves populating two dropdown menus with values from a database. The idea is that when an option is selected in the first dropdown, the second dropdown should dynamically display relevant values based on that s ...

javascripthtml

Using JavaScript, insert a new date row onto a JSP page

When I click on a hyperlink, I want to add a new row to a jsp page. The functionality is working correctly, but the date function class="dateTxt" is not functioning in the new row. Below are the details of the javascript and jsp function. Javascript: fun ...

javascriptjqueryhtmljsp

Limiting overflow:visible to input and select fields only

I'm currently facing an issue with a Lightning Web Component in Salesforce, however, I believe the root cause of this problem is not specific to this platform. Within my container div, I have row divs displaying select/combobox fields that need to ex ...

cssscrollbaroverflow

"Oops! Looks like there's a reference error - the function you're trying

Javascript: function insertSmiley(a) { var $img = $(a).children('img'); $("#message").insertAtCursor(($("#message").data("wbb").options.bbmode) ? $("#message").data("wbb").toBB($(a)): $(a).html()); return false; } HTML: <a href= ...

javascriptjqueryhtml

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

javahtmlcssitext

Enhance your HTML page functionality with the power of jQuery

I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...

htmljquerycss

Refreshing the form fields and storing the information using AngularJS

I have successfully implemented a basic form using AngularJS. The issue I am facing is that even after the user enters their details and submits the form, the values remain in the input fields. My goal is to store the details of multiple fields in the con ...

javascriptjqueryhtmlangularjs