How can I float right two span tags on different lines?


Tags: css,css-float,block,html

Problem :

I have three span tags: One is floated left (A) and the other two are floated right (B and C).

Span Tags

However, what I want is to have C positioned below B but both be floated right; that is, on different lines. I tried to use display:block on B, but that didn't seem to help. How can this be done using span tags (not div)?

Here is my css:

#A {
  float:left;
}

#B {
  float:right;
}

#C {
  float:right;
}

Thank you very much.



Solution :

All you have to do is add clear: right to #C.

See: http://jsfiddle.net/w7K4t/

<div id="container">
    <span id="A">A</span>
    <span id="B">B</span>
    <span id="C">C</span>
</div>


#A {
    float: left;
}
#B {
    float: right;
}
#C {
    float: right;
    clear: right;
}

    CSS Howto..

    Only show limiited div's depending on browser width

    Paragraph Span Class and h3 Are The Same Hex Code, But Are Showing Up As Different Colors

    How do I align 2 divs (each has its own padding) next to each other?

    How can I add a transition effect when opening my custom modal window?

    How to override a css !important property using jQuery with transitions

    How to transform a production to LL(1) for a list separated by a semicolon?

    How can I modify my four quadrants to allow some “breathing room” between them (HTML/CSS)?

    How can clients without Ruby view web pages using SASS?

    How to position a SWIPER SLIDE in the centre of the page? [closed]

    How can I get a label to right align in a table “cell” (td)?

    how to remove a TR which have a TD that contain specific text

    how to cope with text to element alignment issues

    Grunt + Sass, how do I include subfolder scss when I compile?

    using overflow hidden, show a partial element when the children are too large for container

    CSS - How to avoid element content to be displayed on 2 lines

    How to give css sprites effect?

    How to use the compass transition mixins with a translateX property and autoprefixer?

    How do I set a block of text to drop to a new line all at once?

    How specify two css classes: from property and conditional class

    How to wrap text in css

    How to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?

    How can I make my webpage background cover fixed for the full size page in css?

    How to combine components in HTML header

    How to make a “wrappanel” in html?

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How to center SVG within its container?

    How to move last li to right most side CSS

    I am wondering how js fiddle is handling their textareas concerning resizing and their layot

    How to use CSS to vertically center a form in a div

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]