What is the best way to align two span tags to the right on separate lines?

Question

What is the best way to align two span tags to the right on separate lines?

I am facing an issue with the positioning of three span tags: A is floated left while B and C are floated right.

My desired layout is to have C positioned below B, both floating right on separate lines. I attempted using display:block for B but it did not work as expected. How can I achieve this layout using only span tags instead of div?

This is my current CSS styling:

#A {
  float:left;
}

#B {
  float:right;
}

#C {
  float:right;
}

Any advice or assistance would be greatly appreciated. Thank you!

css css-float block html

Answer 1

Answer №1

To fix the layout, simply include clear: right in the CSS for #C.

Take a look at: http://example.com/css-layout

<div id="wrapper">
    <span id="item1">Item 1</span>
    <span id="item2">Item 2</span>
    <span id="item3">Item 3</span>
</div>


#item1 {
    float: left;
}
#item2 {
    float: right;
}
#item3 {
    float: right;
    clear: right;
}

Answer 2

To fix the layout, simply include clear: right in the CSS for #C.

Take a look at: http://example.com/css-layout

<div id="wrapper">
    <span id="item1">Item 1</span>
    <span id="item2">Item 2</span>
    <span id="item3">Item 3</span>
</div>


#item1 {
    float: left;
}
#item2 {
    float: right;
}
#item3 {
    float: right;
    clear: right;
}

Answer 3

Answer №2

You might want to consider adding specific dimensions to the #A element.

Answer 4

You might want to consider adding specific dimensions to the #A element.

Answer 5

Answer №3

To achieve proper formatting, insert a line break (<br/>) after the span element containing the letter B.

<span style="float:left">A</span>

<span style="float:right">B</span><br/>

<span style="float:right">C</span>

Answer 6

To achieve proper formatting, insert a line break (<br/>) after the span element containing the letter B.

<span style="float:left">A</span>

<span style="float:right">B</span><br/>

<span style="float:right">C</span>

What is the best way to align two span tags to the right on separate lines?

Answer №1

Answer №2

Answer №3

Similar questions

Issue with React: Caret icon in dropdown menu shifts position when page is resized to iPad or smaller dimensions

Altering the PHP text hue

Creating interactive buttons in Angular 2

Ways to solve the issue of the mobile dropdown menu in Bootstrap

Are there any universal methods for enlarging the size of a checkbox without altering the HTML structure?

Uncertainty surrounding the extent of a button's scope within an Angular application

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

CSS classes designed to mimic JavaScript object attribute-value pairs

Retrieve the content of the nearest 'td' element using the '.closest()' method, then locate the desired

Achieve vertical alignment of a span text that spans multiple lines within an inline-block element

Conceal or eliminate redundant choices in dropdown menu

The website code lacks a dynamically generated <div> element

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

Modify the color of an Ionic button for a single button, rather than changing the color for all buttons

Replacing an array in Perl with the contents of a SQL database: A step-by-step guide

Troubleshooting problem with CSS scaling on smartphones

What could be causing the issue of nth-child blocking the functionality of a:hover styles?

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

Trouble with Displaying Table Outside of Div in Internet Explorer

Guide to displaying the output of a JS calculation in a Bootstrap modal dialog box