Hi,
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.
Thanks
Make the div wider?
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.
Hello Sam,
Here is the sample page:
https://www.anoox.com/temp/align_spans.php
Looking forward to your reply how to fix this.
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’d say a div would be more appropriate for the last item. It doesn’t appear to be “inline” content as I understand the term.
Sam,
I am sorry, but I do not follow!
How do I apply this clearfix to solve this problem?
Place a clearfix selector in your css using the rules described in the article, for example:-
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
You can call the class anything you like.
Then add that class to the container element that will contain floats, like so.
<div class="oval_gray clearfix">
The div should then expand to contain the float.
Yes, that does work!
But 2 lil problems remain, as you can see here:
https://www.anoox.com/temp/align_spans_test.php
In 1st DIV, how do I get the 1st 3 SPANs that are to the left to be Vertically aligned with the right most SPAN?
in 2nd DIV, the same questions, but now the 1st 3SPANs are on top of each other.
Thanks,
Did you look at the code before posing this question, or did you just look at the way the page rendered in your browser and pop a question?
Try really hard to see if you can spot the difference between the top group of buttons and the lower group of buttons. You ARE writing this HTML, aren’t you?
<div class="oval_gray clearfix" style="margin-left: 40px; margin-right: 40px; padding-top: 15px; padding-bottom: 15px; margin-top: 10px;">
<div class="more_details">Details</div>
<div class="more_details">Details</div>
<div class="more_details">Details</div>
<div class="oval_gray clearfix" style="margin-left: 40px; margin-right: 40px; padding-top: 15px; padding-bottom: 15px; margin-top: 10px;">
<span class="more_details">Details</span>
<br>
<span class="more_details">Details</span>
<br>
<span class="more_details">Details</span>
I strongly recommend that you take a one term formal course in HTML and CSS.
You could format the HTML to be more readable, CSS in the stylesheet instead of inline and neatly indented and all that, if you wanted to help your helpers including your fellow coders on your staff.
NEWS FLASH!
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:
<!doctype html>
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">
Here’s another’n:
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:
.oval_sky_new {
border: 1px solid #6a7faa;
border-radius: 4px; /* not prefixed */
-moz-border-radius: 4px; /* prefixed */
-webkit-border-radius: 4px; /* prefixed */
box-shadow: 0px 0px 8px #d9d9d9; /* not prefixed */
-moz-box-shadow: 0px 0px 8px #d9d9d9; /* prefixed */
-webkit-box-shadow: 0px 0px 8px #d9d9d9; /* prefixed */
}
The above CSS rule should be written with the “not prefixed” lines below the prefixed lines, like this:
.oval_sky_new {
border: 1px solid #6a7faa;
-webkit-border-radius: 4px; /* prefixed */
-moz-border-radius: 4px; /* prefixed */
border-radius: 4px; /* not prefixed */
-webkit-box-shadow: 0px 0px 8px #d9d9d9; /* prefixed */
-moz-box-shadow: 0px 0px 8px #d9d9d9; /* prefixed */
box-shadow: 0px 0px 8px #d9d9d9; /* not prefixed */
}
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.
Thank you for the kind words, @WorldNews. I am always pleased to help someone learn to help themselves.
@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…
Would this structure work?
* { outline: 1px solid #0FF; }
span { margin: 0 0.5em; }
.right {float: right; }
<div>
<span>this is the First span</span>
<span>this is the Second span</span>
<span class="right">this is the Third span</span>
</div>
I think it would, exactly as you have coded it.
Some explaing adressing also @WorldNews:
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”.
I think you could read out the answer to you question, but to give a hand I’ll summarize it like this:
.details {
float: left;
}
.more_details {
display: block;
}
.gray_border {
border: 3px solid #f2f2f2;
padding: 3px;
}
.pos_right {
float: right;
}
.pos_right span,
.pos_right img {
display: block;
}
The spans are semantically contained in divs, as @Mittineague suggested.
<div class="oval_gray clearfix">
<div class="details">
<span class="more_details">Details</span>
<span class="more_details">Details</span>
<span class="more_details">Details</span>
</div>
<div class="gray_border pos_right">
<span>NOTE 1</span>
Here go more Notes <!-- could also be a "block" span -->
<img src="../images/home.png" width="64" height="64">
</div>
</div>
Hi Mitt,
I fixed the problem with combination of suggestions here and the use of:
display: table;
which had not used before.
I tell you CSS can be maddening at times 
But thank you all again.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.