foxsoft ltd

Sometimes things just have to be in the right place. If you’re new to CSS then the frustrating reality of positioning something just so can be too much to bear, but it doesn’t have to be like that. Here’s a quick look at how to position items precisely within their parent object.

The premise

Here’s an example from a website that we designed for one of our customers. As part of the design, the client wanted two breakout boxes where they could note any important news or offers they are currently running.

don't you hate it when things don't line up?

As you can see, there’s a similar amount of information in each box, but they’re not quite the same. I made the boxes themselves the same size to help balance the information.

The Problem

Ideally the two Find out more… links should each be at the bottom of their respective boxes, but they’re not. When the page is generated, the web browser calculates the size of the content and adds on all the appropriate padding, borders and margin. When it gets to the links, it simply puts them in the next available space. Because there’s a difference in the amount of content in each box this means that the links don’t line up for us. What we need is a way to pin the links to the bottom of the box regardless of content.

The Fix

The fix is simple, if not necessarily obvious, and uses the css position attribute. You might have used position: absolute; before to position an element relative to the edge of the browser window, but you might not have considered that you can do the same here. Clearly using this won’t work, but if you check the CSS specs you’ll notice that

“[absolutely positioned elements are]...positioned with respect to its containing block. The containing block for a positioned box is established by the nearest positioned ancestor…”

This means that position: absolute; will be measured relative to the closest parent object that has the position attribute set. So if we set position: relative; on the breakout box then this becomes our reference point (we use position: relative as it means the item stays within the page flow and won’t jumble the rest of your page).

The code

All this theory’s great and all, but what you really need is example code. I won't bore you with every line, but the important bits are here:

The HTML looks like this:

<div class="snippet">
  <h3>CCTV</h3>
  <img alt="Security camera" height="70" src="images/camera.jpg" />
  <p>FREE TOP QUALITY recording & transmission equipment (MEETS LATEST STANDARDS) - 2 month intro...</p>
  <p>Whether your system is existing or newly installed by Focus Ltd - we can link your system...</p>
  <p class="right"><a href="cctv.html">Find out more...</a></p>
</div>

<div class="snippet">
  <h3>Intruder Alarms</h3>
  <img alt="Alarm bellbox" height="70" src="images/bellbox.jpg" />
  <blockquote>
  <p>Futureproof your monitoring system with Dualcom. Dualcom is not going to be affected by the BT...</p>
  </blockquote>
  <p>(BT are changing their coppercore wiring to fibre optics. 40% of all existing telephone...</p>
  <p class="right"><a href="intruder_alarms.html">Find out more...</a></p>
</div>
    	

And the CSS looks like this:

.snippet {
	height: 290px;
	position: relative;
}

#content .right {
	text-align: right;
}

.snippet p.right a {
	position: absolute;
	right: 15px;
	bottom:  10px;
}
      

which gives us the desired result; a subtle, but important difference:

balance is restored!