What is the best way to place two span elements beside each other?

Is there a way to align the name and address on the same line, with the address positioned on the right and the name on the left? Currently, the address is appearing on a separate line from the name. How can I resolve this issue? Here is the provided code for reference:

<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>


#name{
font-size:18px;
float:left;
color:white;
padding-top:30px;

}
#address{
float:left;
font-size:12px;
padding-left:400px;
color:white;
width:300px;
}

Answer №1

<div style="text-align:right;width:100%">
    <span style="float:left">Text on the left</span>
    Text on the right
</div>

These elements will appear on the same line, you can also adjust the parent div's text-align to left and float the span to the right side! For example:

<div style="text-align:left;width:100%">
<span style="float:right">Text on the right</span>
Text on the left
</div>

Answer №2

To achieve the desired text alignment, simply remove the float:left; property. Here is the updated code snippet:

#name{
font-size:18px;
color:blue;
padding-top:30px;

}
#address{
font-size:12px;
padding-left:400px;
color:red;
width:300px;
}
<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>

If you must use float:left;, you can still align the text correctly by adjusting the padding-top to create the right offset for smaller text. Ensure that the smaller text has more top-padding and align the text to the right:

#name{
font-size:18px;
float:left;
padding-top:30px;
color:red;  
}
#address{
font-size:12px;
padding-top:36px;
float:left;
text-align:right;  
width:300px;
color:red;
}
<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>

Answer №3

To ensure the elements are aligned in a row when floating them, make sure to include consistent line-height and padding.

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

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

I need assistance with my code. I'm trying to draw an image on the canvas while maintaining its quality. const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 360px; canvas.height = 360px; const img ...

What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up ove ...

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

Using JavaScript to alter CSS styles with dashes

Currently, I'm delving into the world of manipulating CSS using JavaScript: img.style.borderRadius = "100%"; img.style.border = "9px solid #ffffff"; img.style.boxShadow = "0 0 5px #00000070"; img.style.margin = "20px"; I'm wondering how to chan ...

Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...

"Troubleshooting issues with Material Design components in AngularJS: Why is <md-select> not functioning correctly

I'm attempting to implement the <md-select> tag, but I can't seem to achieve the same result as shown here. This is the code I've written: <div layout="column" layout-align="center center" style="margin: 0px 10px 0px 5px;"> & ...

PHP does not properly interpret quotation marks when passed from an HTML form

My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...

Issues with Adding Dynamic Rows to MySQL

Struggling with adding dynamic rows and posting to MySQL. The variables seem off, but the script works fine. Need help with MYSQL posting specifically. As a beginner, I seek your forgiveness... The Script is running smoothly! <script type='text/ ...

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

As an example, consider a string similar to: "This is a <b> Sample </b> string with characters < 100" The user has the ability to include HTML tags such as <b>, <div>, and more. These tags are permitted in this scenario. The ma ...

CSS/HTML - Issue with nested divs not displaying properly

Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlig ...

Concealing Nested Div Elements

Can someone help me figure out why my code is not hiding the two divs within my content div? I need assistance checking my code to see what's causing the issue. Thank you! I have made some edits to my code. Currently, both forms appear under the "War ...

Perfectly Positioned Overlay and Text on Top of an Inline SVG Element

Within my inline SVG code, there are circular icons representing different user progress stages, each customized with CSS styling. The SVG contains 5 stages of progress in total and is utilized within an Angular app. For any active stage, a corresponding ...

Experience the captivating AUTOPLAY feature of the mesmerizing FULLSCREEN SLIT SL

I am currently utilizing a slider that is functioning well, however I am encountering an issue with autoplay. Whenever I click on the navigation arrow or Nav dot at the bottom of the slider, the autoplay feature stops working. For more information, please ...

Organize a list using custom span values with JavaScript

<ul id="CoreWebsiteTopHeader_6_list"><li><a class="navigation" href="/seller"><span class="editableLinks" data-id="32638" data-sort="110">Seller</span></a></li><li><a class="navigation" href="/about">&l ...

Equalize the color of overlapping background events with non-overlapping background events in fullcalendar

events:[ {overlap:false, display:'background', start:'2021-12-23 10:15:00', end:'2021-12-23 10:30:00'}, {overlap:false, display:'background', start:'2021-12-23 10:30:00', end:'2021-12-23 10:45:00&a ...

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Here is the snippet of code provided: <s:file name="upload" id="upload"></s:file> $('input[id^="upload"]').change(function(){ alert("aa"); $(this).after('<input type="file" name="upload_3" id="upload_3"/> ...

What's the best way to perfectly align table text in the center both horizontally and vertically?

Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success. My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the ta ...

Setting the minimum and maximum width of a div using Bootstrap, not based on the number of columns

I want to adjust the number of columns based on the width of the screen rather than choosing a specific value like 3, 4, 5, or 6. ...