Our recent project 24sata is living happily and after Vanja’s Two color sIFR and Two color sIFR Take Two articles, it’s now time for me to explain how I managed to position ‘comments’ and ‘read more’ links to bottom of every news preview box, which are all in the same row and of different amount of text within.

A few issues had to be taken into consideration:

• Design composition required those links to be placed at the bottom of each news box, no matter how much text is in the box
• Design also required that all the boxes in a particular row are of equal height and consistent no matter how much text is in the box

Wrapper to the Rescue

Three boxes had to be wrapped into some containing element (example 1), so we can float them to the left . (One must float everything inside also, to ensure expanding of the parent element. Even though it’s usually a good practice, in this particular case floating everything breaks layout in IE.) At this point, we can also set rules for width and borders of the boxes (example 2). As you can see boxes are not positioned where they should be, because wrapper’s width is set to 606px and boxes must be at the most 200px wide (plus margin of 2px). With 1px border, total width of those boxes is more than width of wrapper (mathematically: (200px width + 2px right-margin + 2 x 1px borders) x 3 boxes = 612px total width). We could have set width to 198px right away, but then again we would have to set a value back to 200px, once we deploy faux borders. Faux what? Oops! Keep reading…

Faux Border

In example 3 I made an image and placed it as the background of the wrapper, so we don’t need bottom and side borders of the news boxes, which now solves problem of news preview boxes being too wide. However, we need top border, because we can’t predict actual height of each box, since it depends on the amount of text within. Faux border background image is therefor positioned at the very bottom of the wrapper. This way we get the impression that boxes are extended to the bottom of the wrapper and are of equal height, even though they actually aren’t. Perfect! Now let’s go a little bit further…

Stuck Links to the Bottom

Next thing to do is positioning ‘comments’ and ‘read more’ link to the bottom of the wrapper (example 4), since the boxes are not as high as they appear to be. First of all, we add position: relative; rule for the wrapper. This ensures absolute positioning of ‘comments’ and ‘read more’ links relative to wrapper, not to the corresponding boxes (which are of different heights, remember?). Since we can add class names cnt1, cnt2 and cnt3 to the boxes, we can safely position each of them separately.

.smallBox .subNav { position: absolute; bottom: 0; }
.cnt1 .subNav { left: 0; }
.cnt2 .subNav { left: 202px; }
.cnt3 .subNav { left: 404px; }

(.smallBox and cnt1 etc. are two different class names at the same element).

Also, we must establish bottom padding of the boxes, since the links are positioned absolute, so they are out of the flow. Without bottom padding, text in the longest box would fall behind the links. To fix this, we can increase padding bottom by 1em (or whatever line-height of the links is), to ensure that text in the boxes doesn’t fall behind.

Final Touch

Finally, we have to move ‘comments’ link to the left and ‘read more’ link to the right (example 5). To achieve that, just float parent element (in this case <ul>) and both <li>s (which are carrying links) to the left. For <li> which carries ‘read more’ link we should shift text to the right by adding text-align: right; rule. We should also set some width and paddings to both <li>s, so they do not collide.

.subNav li { list-style: none; width: 90px; float: left; }
.readMore { text-align: right; }

And that’s pretty much it… Any thoughts?