Question

I have a setup similar to code below, where there can be any number of items.

<div class="align-center" style="box-shadow: none; margin: 20px 0 0 20px; position: relative">
    ...
    ...
    ...
    ...
    ...
    <label class="photobox box-shadow clear-inner radius" style="display: inline-block; margin: 20px 20px 0 0" for="col_75291999308">
        <img class="radius-left cursor-pointer" height="128" width="128" alt="[thumb]" src="images/collection/thumb/penguins-madagascar-dr-blowhole.jpg" />
        <span class="large bold text-shadow black-text" style="line-height: 128px; padding: 0 5px">‣</span>
    </label>
    <input id="col_75291999308" class="switch single" type="radio" name="description" />
    <div class="box box-shadow" style="border: 5px solid #379; border-radius: 10px; left: 50%; margin: -74px 0 0 -266px; position: absolute; width: 512px; z-index: 999">Information</div>
    ...
    ...
</div>

If you’re curious, I’ll provide the CSS for the photo box. All the other classes are kind of self-explanatory (aside from box, which just applies a background and border radius).

input.switch { display: none }
input.switch.single + div { display: none }
input.switch.single:checked + div { display: block }

.photobox { background: #DDD; display: block; height: 128px; overflow: hidden }
.photobox:hover { background: #D5D5D5 }
.photobox > img { background: #CCC url('images/smooth/loading.png') repeat; border-right: 1px solid #BCC3C7; float: left; height: 128px; width: 128px }
.photobox > div, .position > span { cursor: pointer; height: 108px; margin-left: 129px; padding: 10px; position: relative }
.photobox > span { margin-left: 0 }
.photobox > div > .floater { color: #EEE; display: block; line-height: 14px; opacity: 0; position: absolute; top: 5px; left: -123px; text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333 }
.photobox:hover > div > .floater { opacity: 1.0; transition: opacity .5s linear }

This is not the entire code, but basically each division corresponds to a label and input radio box. By default, the division is hidden and the label activates the radio box that corresponds to it, which then unhides the division immediately after it (the radio boxes are always hidden).

The idea is that the absolutely positioned element will center horizontally in the parent container and then stay at the same y position that it appears at normally (by not specifying top or bottom). However, the items in the very last row will cause this “popup” box to flow past the bottom of the parent container.

How can I prevent any and all of these boxes from extending past the bottom of the container? Basically, if there’s enough room, stay in the position it’s at. If there’s not enough room, it should push the box up to the bottom of the container. Is this possible with only CSS?

Keep in mind that this example just happens to use four columns, but the number of columns is completely dependent on the size of the client’s screen. Please don’t suggest server-side checks to “determine” if the item will be in the last row. Also, just to emphasize, no JavaScript.

Answer 1

This does not appear to be possible with pure CSS. I tried everything I could thing of but the closest solution I could get was using :nth-last-of-type(-n+6) to push up the division for the last 6 items in the grid. The only problem with that solution was when a user resized the window (either smaller or larger), there weren’t always exactly 6 elements in the last row.

I ended up retheming my site recently which now uses a definitive width, where there will always be 6 items in the last row, so the :nth-last-of-type(-n+6) selector works for me in this case.

The only thing I could think of is if CSS ever implemented a :last-line selector similar to the existing :first-line selector, which would allow you to select the last line and then select each division inside that line… maybe? I don’t know if that’s even possible with that selector.

Aside from using a fixed width for the parent, the idea from the comments is the next best way to go. As long as their is a sufficient amount of content below the parent (maybe a few extra lines), the expansion past the parents’ boundaries is not a huge deal and could just be left alone.