Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have -

.font-size-add-class {
background-color: #2f2f2f;
color: #f9f7f1;
}

.font-sizes {
  text-align: right;
  display: table;
  margin-top: 15px;
  cursor: pointer;
}
.font-sizes > .small {
  font-size: 12px;
}
.font-sizes > .medium {
  font-size: 14px;
}
.font-sizes > .large {
  font-size: 18px;
}
.font-sizes > div {
  display: table-cell;
  padding: 0 10px;
  font-weight: bold;
  border-top: 1px solid #2f2f2f;
  border-bottom: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
}
.font-sizes > div:first-child {
  border-left: 1px solid #2f2f2f;
}
<div class="font-sizes">
    <div class="small">a</div><!--
 --><div class="medium font-size-add-class">a</div><!--
 --><div class="large">a</div>
</div>

If I avoid using table on the parent and table-cell on the child, the div blocks will have different sizes due to varying font sizes. Additionally, the fonts won't be horizontally aligned.

I'm looking to replicate the current structure exactly as it looks now but move it to the right side of the page. Any suggestions on how I can achieve this?

css

Answer №1

Instead of using text-align, consider utilizing the following:

margin-left: auto;
margin-right: 0;


.font-size-add-class {
background-color: #2f2f2f;
color: #f9f7f1;
}

.font-sizes {
  /*text-align: right;*/
  display: table;
  margin-top: 15px;
  cursor: pointer;
  margin-left: auto; /* align table to the right */
  margin-right: 0;
}
.font-sizes > .small {
  font-size: 12px;
}
.font-sizes > .medium {
  font-size: 14px;
}
.font-sizes > .large {
  font-size: 18px;
}
.font-sizes > div {
  display: table-cell;
  padding: 0 10px;
  font-weight: bold;
  border-top: 1px solid #2f2f2f;
  border-bottom: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
}
.font-sizes > div:first-child {
  border-left: 1px solid #2f2f2f;
}
<div class="font-sizes">
    <div class="small">a</div><!--
 --><div class="medium font-size-add-class">a</div><!--
 --><div class="large">a</div>
</div>

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

Guide to creating intricate animations using a CSS/JS user interface editor

Is there an easy way to create complex animations without blindly tweaking keyframes? I'm searching for a tool or editor that can generate the necessary animation code, similar to this example: https://codepen.io/kilianso/pen/NaLzVW /* STATE 2 */ .scr ...

javascriptcssanimationtransition

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

javascriptcssvue.jsquasar-framework

An issue with the animation script in Ionic

I'm having trouble converting this to an Ionic application. Here's my code sample. Can anyone help me with putting this code correctly in Ionic? I'm trying to achieve something like this example <script src="https://cdnjs.cloudflare.com ...

cssangularionic-framework

The -webkit-background-clip feature seems to be malfunctioning in Safari

I am experiencing an issue where the code works perfectly on Chrome but fails to function properly on Safari. I have been unable to pinpoint the cause of this discrepancy and any assistance or insights would be greatly appreciated. For those interested, a ...

htmlcss

The Bootstrap 4 column is not floating properly to the right as it is leaving a gap on the

My right sidebar is not floating to the right and has space from the right side. You can view it at this link: <div class="col-md-2 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;"& ...

cssbootstrap-4css-float

Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: However, with my current code, the result I'm seeing is different from what I expected: This snippet showcases the code I am working with: ...

cssionic-frameworksassionic3

Styling a parent element when it is in focus using CSS3

Is there a way to apply a style to the parent element when an input is in focus? input:focus { background-color:yellow; } For example, if we have the following HTML: <div class="foo"> <input type="text /> Hello </div> I ...

htmlcss

How to Maintain SASS Code Efficiency with Media Queries

How can I avoid repeating myself in my CSS code when using two different media queries for phones and tablets that require the same exact styling? $mobile-portrait: "only screen and (max-width: 680px)"; $tablet-portrait: "only screen and (min-device-wid ...

htmlcsssassmedia-queries

Eliminate the see-through effect from a logo positioned in a fading container

I created a div with image fading functionality using JavaScript and placed a static SVG logo on top of it. The issue I'm facing is that the logo appears somewhat transparent, allowing the image in the div to show through. Despite adjusting the z-inde ...

jqueryhtmlcsssvg

Styling Drawn Elements on a Canvas Using CSS

Can CSS Animations be applied to a circle drawn on a canvas using JavaScript? Specifically, I am using an AngularJS directive for this purpose: https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-direct ...

cssangularjscanvasangularjs-directivecss-animations

Incorrect viewport widths in Vue Bootstrap fluid containers

I require a container that spans 100% of the available width until it reaches a specific breakpoint (max-width). Upon exploring the official documentation, I came across the responsive fluid container, which appeared to be a suitable choice. Responsive ...

cssvue.jsbootstrap-4bootstrap-vue

The size of the image remains as is and does not adjust in

For some reason, my image is not adjusting its size properly. Despite searching online for solutions, I have been unable to resolve the issue. According to W3schools, I should set it up like this using the formular-banner class. .formular-banner { ...

htmlcssresponsive-design

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

javascriptjqueryhtmlcss

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Having trouble accessing listview capabilities in jquerymobile?

I am currently delving into the world of jquerymobile. I am experimenting with a sample project where I aim to showcase a listview. Below is the code that I have been working on. <!doctype html> <html> <head> <link rel="stylesheet" h ...

jqueryhtmlcsslistviewjquery-mobile

Why isn't Sequence.js Slider automatically playing?

Issue: The sequence.js slider I implemented is not animating. Despite adding the following options: animateCanvas: true, fadeStepWhenSkipped: false, autoPlay: true, autoPlayInterval, 2000 It still does not work. Is there something essential t ...

javascriptjquerycsshtmlslider

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

javascriptcssreactjs

Tips for customizing your MUI slider design

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

javascriptcssreactjsmaterial-ui

Exploring ways to access an element's background color through JavaScript

Is there a way to access an element's CSS properties that are set by a class name in JavaScript? In the case of the first div element, I have applied a "red" class which sets its background color to red. However, when I try to access the div's b ...

javascripthtmlcss

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

cssmobile