We have DIVs in which are SPAN1 SPAN2 SPAN3 with say 25px margin between each.
Now we want to have SPAN4, which contains a bunch of items from image to text to button
to be at the right most of this DIV, that is to the rightmost of the 1st 3 SPANs in these DIVs.
How do we to this?
FYI, we tried float: right on SPAN4 and it is not working, that is it does go to the righmost but then it drops down by like 50px from the line that other SPANs are on.
Can you post the code, particularly the css.
I’m confused by this because the in-line content (spans) should naturally flow left to right, so the 4th (last) span will be the right-most element in the div. Unless you did something to alter that with css.
I see it now, becuase the 4th span is floated, it’s not in the usual document flow, so the container (div) does not expand vertically to contain it.
What you need is a clearfix to make the container clear the floats.
I know that you’ve been told before (and I certainly don’t want to nag) that your <!doctype> is not only out of date, it is also INVALID so the code is being rendered in QUIRKS mode (as if there were no doctype).
The modern doctype is still:
To be valid, the one you are currently bungling should be written:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I’m sure you’ve heard this before, so I applogize in advance for belaboring an old topic.
When one writes CSS that includes vendor prefixes, the “not prefixed” line of CSS should go below the prefixed lines. This is an example of the wrong order from your style_fancy.css:
You need to rewrite the other rules on that page to conform to this practice.
Of course, all of the verndor prefixed rules that you are using may no longer needed. (Your code does look like it’s borrowed from older examples.) So the appropriate thing for a responaible developer to do is verify the need for the vendor prefixes and delete those that are unnecessary today.
The code that you write and the impression it makes is your choice, of course.
1st, I did change the doctype.
2nd, if everyone answered like you that you should read Book XYZ rather than answer the questions posted here, then this Site would not be needed. So if you have the answer to a question, then kindly give it. If not, you really can cut out “you should read a book part…”
3rd, I am all for continuously reading and learning, as I do all the time. But right now I am looking for an answer to a specific question that needs to get resolved now. So if you have it give it and thank you, if not fine.
@ronpat gave you the answer to that in post #10. The reason your two blocks are behaving differently is that the code is different.
In the first block, you have (rather curiously) changed the first three containers to <div> whilst leaving that last as a <span>. In the second, you are still using <span> for all four containers. Oh - and you’ve inserted <br> tags between them, to force them onto new rows…
The right floated span can go up one text line here (as is the inline spans’ line height) and be adjacent to the other spans, but if the unfloated spans would be two lines heigh, they should be floated left in order to leave room for the right to go up all the way.
Or change the span sequence so the right floated comes before the non floated in code, that is the “general float rule”.
The spans are semantically contained in divs, as @Mittineague suggested.
<div class="oval_gray clearfix">
<div class="gray_border pos_right">
Here go more Notes <!-- could also be a "block" span -->
<img src="../images/home.png" width="64" height="64">