Gordon Gordon - 1 year ago 58
HTML Question

<span> position relative to parent container

I am trying to use

to address some tabular data which I want to position relative to the container edge, the container being a WordPress Toggle.

I have tried this in CSS

.px_update_number {
position: relative;left: 2em;
.px_update_date {
position: relative;left: 4em;
.px_update_notes {
position: relative;left: 6em;

and this in the HTML

<span class="px_update_number">SP1</span><span class="px_update_date">2015.04.16</span>

and the spacing is relative to the "column" before. If I use Absolute in the CSS then alignment is relative to the page edge, not the Toggle. And I need the toggle because there is going to be a ton of data, and at any one time someone is going to be looking only for a very specific bit.

So, am I just implementing this wrong? Or am I barking up an empty tree and I need to reconsider some aspect of what i am trying to do?

OK, so nesting s helped, but I am still having an issue. I would expect this

<span class="px_update_number">#<span class="px_update_date">DATE<span class="px_revitupdate_build">BUILD</span></span></span>
<span class="px_update_number">FCS<span class="px_update_date">2016.04.18<span class="px_revitupdate_build">20160225_1515</span></span></span>

to produce a header row with good alignment. But instead the alignments are off. Despite now getting multiple rows of the actual data to seemingly work right.

And, not sure I have it right yet, as this

<span class="px_update_number">R2<span class="px_update_date">2015.10.22<span class="px_revitupdate_build">20151007_0715</span><span class="px_revitupdate_notes">All Updates after R2 are subscription only</span></span></span>
<span class="px_update_number"><s>1</s><span class="px_update_date">2015.12.17<span class="px_revitupdate_build">20151209_0715<span class="px_revitupdate_notes">Expired</span></span></span></span>

still shows a misalignment in the second column, as if it's being aligned to the right side of the first column, not the left, so when the number of characters in the first column changes it throws everything off.

link to MCVE

Answer Source

span tags are inline by default. But left settings (as well as top, bottom and right) only affect block elements (which also need to have a defined position other than static). So in your CSS those left settings do nothing.

As a quick fix you can add display: inline-block to the CSS classes you posted above.


Here's a codepen:


position: relative; plus a left setting will move the element by the given value. But the space kept free for the element is not moved. So if you give your first element left: 2em; and the second element also left: 2em;, it will look as if there is no space between them.

So if you want the second element to be 4em right of the first one, you actually have to give it left: 6em; (as in my codepen)


Here http://codepen.io/anon/pen/rLYYXz I used margin-leftinstead of left, which does what you probably want: It creates space between the elements, without the complication of the left setting as described above.


Cange the position: relative to absolute and again use left (not margin-left). Now the distances are measured in relation to the parent elements upper left corner, so the second element will stay at the same position regardless of the contents of the first one:


If all that is in a parent container, it will have to have `position: relative: