Making a node appear after its siblings using CSS

Question

Given makup that looks like this:

<div>
    <span> a </span>
    <span class="oddOneOut"> [XYZ] </span>
    <span> b </span>
    <span> c </span>
</div>

Is there a way to, using just CSS, force the [XYZ] node to always appear as the last item, on the bottom right, like in the following examples?

+--------------+
| a b c  [XYZ] |
+--------------+

+--------------+
| a b c d e f g|
| h i    [XYZ] |
+--------------+

If there is no straightfoward solution I would also be interested in other ways to achieve the same effect

@ThatMatthew: Of course. All that matters to me is the end result. — hugomg, Sep 13 '11 at 18:25

score 2 · Accepted Answer · edited Sep 13 '11 at 18:42

2

div
{
    position: relative; /* make absolute children be absolute inside of it. */
}

div .oddOneOut
{
    position: absolute;
    bottom: 5px;
    right: 5px;
}

The padding may need to be adjusted a bit. The point is to use absolute positioning.

edited Sep 13 '11 at 18:42

hugomg

68,213
24
160
246

answered Sep 13 '11 at 18:26

ThatMatthew

1,248
9
12

Is there a way to make is so that the other letters don't go under the `XYZ`? If there are just enough letters to form a line (going up to the "g") the last ones go under the XYZ – hugomg Sep 13 '11 at 18:38
Sorry, I can't think of a fix for that issue that doesn't involve JavaScript. I found this question, which says that this is difficult to do with CSS: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div – ThatMatthew Sep 13 '11 at 19:03
Thanks. Somehow just doing the position absolute worked on the *actual* problem I had o_O. Phew. – hugomg Sep 13 '11 at 19:29

score 1 · Answer 2 · answered Nov 29 '12 at 03:56

There is a way to achieve this behavior along with all of the positioning stipulations that you wanted in the comments of the accepted answer, all using just CSS.

The solution lies in using the new box-sizing: border-box property to change the way the CSS box model works. With box-sizing: border-box, you can use padding as if it were inset spacing. Therefore, if you specify the padding-bottom of the container element to be the height of the absolutely-positioned child, the sibling elements will not go underneath the absolutely positioned child.

See my jsfiddle for demonstration.

score 0 · Answer 3 · answered Sep 13 '11 at 17:47

0

You can make it float including this in the CSS for the second span:

float:right

answered Sep 13 '11 at 17:47

ggarber

8,300
5
27
32

I already tried this and in the second example the XYZ node would appear on top instead of on the bottom where I want it to be. – hugomg Sep 13 '11 at 17:54

Making a node appear after its siblings using CSS

3 Answers3