How do we line up SPANs on various lines right under each other?

[WorldNews]

Hello,

How do we lign up various SPANs right under each other, even though the span before them can be in varying length. As you can see here:

https://www.anoox.com/temp/align_spans.php

So what we are looking for is the CSS code that would lign up all those “Details” buttons (span) right under each other in same exact vertical line.

Thanks.

[pr0c3ss]

ahh i see what you mean…

You would need to have some inner containers. inside div oval_gray, place 2 divs. One to hold the text and one to hold the detail buttons. set text-align:justify

[SamA74]

Using display: table/table-row/table-cell on various elements.
A container for the divs as table, the divs as table-row then spans for the line of text and ‘Details’ buttons as table-cell.
That should keep it all in a table like grid formation without having to use actual tables.
It could also be done by floating the buttons to the right. Or for a more modern solution, it could be done with flex-box.

Edit:-
Did you see this?

dCode_Understanding CSS Positioning

Hi, This thread is about positioning elements with CSS and to get the thread started and to give you all something to think/talk about I’ve created a small demo that simply places a small 50px fixed width and height red box to the right of the page. The html is basically as follows: <div class="wrap"> <div class="box">Box</div> </div> [image] Before you look at the demo take some time and see how many ways you can think of doing this? You may immediately think of about 3 ways to do this b…

[molona]

@pr0c3ss

span should be inline though. Perhaps use div instead?

Span is fine here because he’s aligning them horizontally as well as vertically, and he’s using them as it is supposed to: inline element.

@WorldNews

I don’t think that I would have used DIVs to wrap what it looks to me a paragraph. But can I ask why did you a absolute position when you don’t have anything else positioned, not to say absolutely?

Because you are not using position for anything else, the position itself will be in relation to the HTML element.

And besides… you’re not taking advantage of the absolute position… because you don’t tell the item where it should be. You just use the margin instead of left (position should go with left and top, left and bottom, right and top or any other combination)

Also, I wouldn’t use SPAN for note. It is obviously that you’re emphasazing the word, therefore that should be a EM element to my eyes. Then you can style it the way you want.

[WorldNews]

Sorry, I do not follow what you are exactly suggesting!
Can you give Code sample?
Thanks.

[ronpat]

Can you follow @SamA74’s suggestion? (Sam builds on pr0c3ss’ concept.) It sound’s to me like it would be easy to implement and work perfectly.

What’s with the HTML 4.0 Transitional doctype, Old World head section, and all of the inline CSS in the style attributes?

[SamA74]

This example uses Flex.
I first tried with display table, but struggled to get the spacing between rows like you have, sure there is a way I’m missing.
It also takes on the comments by @molona about the elements you use and removes all the nasty in-line styling to use just one class attribute for the whole thing for super slim html.

[PaulOB]

@SamA74

but struggled to get the spacing between rows like you have, sure there is a way I’m missing.

Like this

[SamA74]

I knew it was there somewhere!
I tried border-spacing but put it on the wrong element selector.
I tried it on row and cell, but not table.

[WorldNews]

Hi,

This is pretty impressive CSS level stuff.
I am afraid this level of CSS is above my comfort level, as I was looking for suggestion within the CSS framework we are working with, which obviously is not as high a level as yours
Wish you all working for us as Volunteers. Alas you are not

OTN, do you have a CSS book to read which would give one the Super High level CSS knowledge that you have.

Anyway, Thanks.

[Noppy]

out of interest i wondered what i would have done if i had to do this quickly. I am certainly far from an expert so i am only posting this to show the difference in the way i did it and perhaps learn to do it better from showing my workings. The main difference i note in what i have done is that when the screen resizes my end button moves underneath. any comments on whether my solution is passable,ok,just another way of doing it, terrible, awful (and why) could be interesting (or make me cry).

ZpBWrQ

[PaulOB]

@WorldNews

, as I was looking for suggestion within the CSS

You could just float the details to the right by changing the code here in your example.

<span class="more_details" style="/* position: absolute; margin-left: 60px;*/float: right;">Details</span>

As with other examples it will put the details at the far right of the line.

Or you could position it to the right with right:0 and absolute positioning but you will need to make sure the line is padded at the end to protect the absolute element.

[WorldNews]

Noppy Thanks.

[WorldNews]

Paul Thanks.