What are the best ways to position elements within a div?

In my small information div, I am looking to align the content on the right side. Specifically, 065 31 323 323, 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d4c4c1c0cbdfc4e5c2c8c4ccc98bc6cac8">[email protected]</a>
, and qadenza323 should be left-aligned. I have experimented with various numbers of spaces and non-breaking spaces but without success.

<div id="divInfo">
<div>Mobile - 065 31 323 323</div>
<div>Gmail - <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b8a8adaca7b3a889aea4a8a0a5e7aaa6a4">[email protected]</a></div>
<div>Skype - qadenza323</div>
</div>

#divInfo{
    display:inline-block;
    margin-left:29vw;
    border:thin solid red;
}
#divInfo div{
    padding:2px 5px;
    border-radius:7px;
    cursor:pointer;
}
#divInfo div:hover{
    background:#e1e1e1;
}

You can view the fiddle here

htmlcssalignment

Answer №1

Consider using a table if you need the rest of the content to be aligned to the left as well. You can utilize tr:hover to change the background when hovering over rows. Check out this example on jsFiddle for guidance: http://jsfiddle.net/VLjRK/5/

If you want to align the data to the right and the names to the left, you may need to incorporate an inline HTML element like a span and use float to position it to the right. I've made some adjustments to your jsFiddle to demonstrate this - http://jsfiddle.net/VLjRK/3/

Answer №2

After reviewing your code, I have made the following alterations -

Include a span tag to align it to the right side

<div id="informationContainer">
<div><span>- Phone</span> 065 31 323 323</div>
<div><span> - Email</span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8c9c999893879cbd9a909c94d39e9290">[email protected]</a></div>
<div><span> - Skype</span>qadenza323</div>
</div>

Add a CSS class with float:right;

#informationContainer span{
    float:right;
}

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

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

cssreactjsmaterial-ui

For a while now, I've been attempting to transform my paragraph into a block within a section that showcases elements in an inline-flex layout

I have been attempting to adjust the paragraph with the errorDate class so that it displays as a block element directly beneath the input element similar to the image provided here. The section is currently set to appear as an inline-flex. Below is the CS ...

htmlcss

Utilize Bootstrap cards to display images across the full width of the page

I am using the Bootstrap card component https://getbootstrap.com/docs/4.0/components/card/ to display an image. The issue I'm facing is that on the Bootstrap template, it adds a margin around the image. I would like the image to take up the full width ...

htmlcsstwitter-bootstrapbootstrap-4

Unlimited highway CSS3 motion

I have come across a stunning 2D Highway background image that I plan to use for my mobile racing game project which involves JS and CSS3. The image can be found at this link. My goal is to create an animation of the road in order to give players the illu ...

javascripthtmlcsscss-animations

How can I convert the stylesheet link from fonts.google.com into a CSS class and include it in my file.css as an internal style instead of an external one?

Looking to incorporate a font from fonts.google.com? Here's how you can do it: <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300 ...

windows-10fontshtmlcss

Show or hide a div through two variables that toggle between different states

It's possible that I'm not fully awake, so missing the obvious is a possibility. However, I have 2 variables that determine whether a div has a specific class or not. The class functions more like a toggle; so the following conditions should tri ...

javascripthtmlangularjs

Incorporating list view separators using JQuery Mobile

I recently started using the Jquery Mobile Flat UI Theme and I'm really impressed. However, I would like to enhance it by adding a separator between each listview. Here is my current listview: Can someone please advise me on which code I need to add ...

jquerycsslistviewjquery-mobile

Using a new hue for a hyperlink

I currently have the following CSS styling for my links: DIV#tt { background: #fff; color: #333; margin: 0 0 15px; position: relative; padding: 1px; } DIV#tt A, DIV#tt SPAN.link { color: #990000; } These styles work well and chang ...

css

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

htmlcssimageborder

Tips for eliminating the default hover and active states from a textfield in Material UI

Currently, I am in the process of creating a login form and have incorporated Material UI textfields. However, I am facing an issue where the textfield's default hover and active states cannot be removed. Below is my password textfield: (https://i.st ...

cssreactjsmaterial-ui

Unusual Happenings with jQuery Draggable

Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue. When I drag the letter H towards the right and it gets near the letters E, L, L, or O, ...

jqueryhtmlcssdraggable

What is the best way to restrict the size of a table that is filled with data from a database?

Currently using a combination of React, Node, Express, and Postgres to populate a table with data retrieved from Postgres. The issue arises when the table becomes overly long, prompting the need to display only 5 rows at once while adding a scroll bar for ...

javascripthtmlcssreactjspostgresql

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

@media (min-width: 992px) and (max-width: 1140px) { .mr-1024-none { margin-right: 0px !important; } .mt-1024 { margin-top: 1rem !important; } .d-1024-none { display: none !important; } } Utilizing the ...

javascriptcss

There is an issue showing up in the console: $(…).datepicker is not defined as a function

I am new to using HTML with JavaScript. I attempted to implement a datepicker, but unfortunately, it is not working as expected. The error message I am receiving is '$(...).datepicker is not a function' in the console. I am utilizing multiple f ...

javascriptjqueryhtml

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

Safari causing placeholders to be sliced

I'm having trouble creating attractive placeholders in Safari. This is how it currently appears. Codepen: https://codepen.io/anon/pen/RLWrrK .form-control { height: 45px; padding: 15px; font-size: 16px; color: #8c8c8c; background-color: ...

htmlcsstwitter-bootstrap

Utilizing HTML5 to Access and Update custom data attributes

I have implemented the following code: var activeFilter = $('<li></li>').data('input-id', 'mycustomId'); $('#container').append(activeFilter); Now, I am faced with the challenge of retrieving a specific ...

javascriptjqueryhtmljquery-data

What is the best way to add child elements to the parent element when the height limit has been reached?

This is the code I've been working on: <ul style="height:200px;width:100%;"> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... (add more items here) </ul> Here is a preview of how it currently looks: ...

htmlcss

Unable to utilize external JavaScript files in Angular 8

I've been working on integrating an HTML template into my Angular project and for the most part, everything is going smoothly. However, I've encountered an issue where my JS plugins are not loading properly. I have double-checked the file paths i ...

javascriptjqueryhtmlangular

From plain to vibrant: Using CSS gradients for background design

I have customized a button by adding a gradient to it. Below is the code snippet: .mybutton { background: #258dc8; /* Old browsers */ background: -moz-linear-gradient(top, #258dc8 0%, #258dc8 100%); /* FF3.6+ */ background: -webkit-gradient( ...

css