Photoshop CS4 - 3D Billiard Ball: Part 1
HTML/CSS Crash Primer
Adobe Illustrator CS3 for Absolute Beginners - Part 3: Overview of The Work Area
Introducing CMX JumpStart Nairobi
Expose Right—Taking the Strange Out of Dynamic Range
Page 1 of 2 This series will deal with various CSS "tasks," those things designers wish to have happen in the display of their pages, using CSS, which seem like they ought to be simple to do. Sometimes the design will require items to occupy certain positions, or text might need to wrap around images in a certain way. There are many possibilities.
Previously, one might have easily accomplished the task using a table (or two), or perhaps other coding practices that are now recognized as less than ideal because they might bloat pages, or are not as efficient as they could be. The need for accomplishing the tasks is common to most web authors sooner or later, but the techniques used to do them are not widely known in the community yet, causing thousands to "reinvent the wheel" daily. It's got to stop sometime, so why not now?
Our first "task" involves placing two items in a box, and having them display on opposite sides of said box. They might be a pair of images, one left and one right, or a business name and a phone number, or perhaps a header that needs a logo at one end and navigation text at the other. It could be any number of things.
This sounds simple, and it is. Skilled table coders can do this automatically, but surprisingly, many people have difficulty doing it without benefit of tables. Well, we're going to show you that CSS rules do make it possible, using either of two methods. So, counting tables, that's three methods to accomplish the task, and we all know that three is better than one, right?
To some it might seem that having oppositely placed elements is not a big issue, but requests for help on this task come up quite often on CSS forums. Apparently, the need for oppositely aligned elements is rather common. That being understood, let's "spread out."
Using absolute positioning (or AP for short), it is possible to place page elements anywhere within a box, subject to certain constraints inherent in the method. Thus, you may have an element on one side of a box and another element over against the opposite side. All it takes is the correct CSS, and those items are pasted in the desired spots.
Notice we said pasted, because that's exactly what happens. Such AP elements are indeed placed on the sides, but they are also removed from the flow of the parent box, meaning their placement is not taken into consideration by non-AP elements within the box. Depending on source order or z-index, non-AP elements may get covered up by these AP elements.
If no other content is within the box besides the AP elements, then no cover-up can happen, but then the box has no "real" flowed content that can stretch it vertically. The AP elements won't do this because they are no longer in the flow (taking up space), and unlike floated elements, AP elements cannot be cleared. So in this case, it is necessary to set some height value to the container box or it will have no screen height, and the AP elements will hang down from the container like flags from a balcony.
When using this method, several things must be done.
So let's look at the code needed to have our two elements aligned on opposite sides of a box.
<div class="container">
<div class="left-element">
Content in left item
</div>
<div class="right-element">
Content in right item
</div>
</div>
.container {
position: relative;
height: 50px;
}
.left-element {
position: absolute;
left: 0;
width: 50%;
}
.right-element {
position: absolute;
right: 0;
width: 50%;
text-align: right; /* depends on element width */
}
When an AP element is placed using the right property, an effect known as the 1px Rounding Error can occur, causing the AP element to be placed 1px to the left of its correct position. This won't matter if only text is involved, but if the AP element has borders or a background and is designed to fit precisely against the right container edge, it may be a problem.
Note: While IE5/Mac will generally position elements correctly at the right side of the viewport, the browser will show a mysterious and unneeded horizontal scrollbar. Testing by others has uncovered a "secret right margin" on absolutely positioned elements. There are several methods to defeat this problem. You can read more about it, and ways to overcome it at Philippe Wittenbergh's Mac IE 5 test page about right positioning.
The top property can be used for exact vertical control, or it may be omitted. When this is done, the uncoded/unwritten value for top defaults to auto, placing the element directly below any previous flowed element that precedes it in the source. Also, remember that these AP elements aren't really "inside" the container, but rather are stacked over it, so if content within them causes them to become taller they may protrude below the bottom of the container. This is one good reason to avoid excessive use of absolute positioning on a page, when simply flowing the content can do the job better and more safely.
If you are wondering what sort of widths on the AP elements are best, then stop wondering and just do some experimentation. Any widths will work, depending on the desired look. Sometimes pixels are fine, sometimes percentages, or ems can come in handy. The two items don't need to have the same width units either. You could have percentage on one side and em on the other. Playing with the variables is often the best way to get the layout looking good.
Keywords
CSS, align elements, absolute positioning, float, align elements left and right, CSS task
