arantius.com

BWD Chapter 16: CSS: Positioning and Layout

2005-04-12 20:27 - Beginners Web Development

Chapter 16
CSS: Positioning and Layout

When it comes to style sheets, one of the most important things to know is how to make the page look the way you would like. There are a number of techniques and tricks to lay out the parts of a page to attain the design you desire.

Floats

The most basic layout technique is floats. The word float refers to what it does: take an element out from where it would normally be and float it towards the side of its container. There are three valid values for the float property: left, right and none. A floated element is much like a picture in a magazine article; the text (and other elements) near a floated element will flow around it, hugging the edges. Consider the following example:

<img src='/misc/kitty/th/tiger03.jpg' style='float: left;' />
<p>Lorem ipsum dolor sit amet, .....</p>

Lorem ipsum dolor sit amet, nostra posuere cras consectetuer pede porta vivamus natoque auctor consequat consequat nonummy sem arcu justo orci. Non parturient lobortis, velit aliquet torquent lacus sapien integer tincidunt. Cum odio eget euismod quam tincidunt viverra primis ligula aptent suscipit. Pellentesque, orci augue facilisis varius. Netus eleifend, suscipit nullam. Justo mi cursus leo amet felis auctor et non sit curabitur netus mus nostra orci integer. Arcu semper iaculis.

Cubilia eros fusce id, congue venenatis massa in iaculis aenean. Auctor taciti, torquent gravida lobortis. Amet est condimentum phasellus. Viverra primis commodo hac. Malesuada habitant dictumst tempus ligula cubilia id, sollicitudin metus interdum integer fusce. Egestas senectus primis varius fermentum ridiculus dolor. Tellus potenti laoreet nisl semper sagittis phasellus.

The example above is reproduced directly below the example, with the addition of some spacing, a border, and more text to make the effect more obvious. See how the image sits in the corner of the container, and the text flows around the image? This is just what float is for. But there is a pitfall to watch out for. Consider this similar example:

<img src='/img/hot.png' style='float: left;' /> Hot link 1<br />
<img src='/img/hot.png' style='float: left;' /> Hot link 2<br />

Hot link 1
Hot link 2

Oops, that certainly is not what we wanted, even though the HTML and the styles all seem to make sense. The problem is the image is bigger than the text, so there is space for the next line to flow around the image. Well, float has a brother called clear that deals with just such a situation. Clear can be set to the same three values as float, plus additionally both. What clear means, though, is that the side specified must be clear of floats, no floated elements are permitted on that side. If there is something on that side, it will be moved down the page until it no longer touches the other element's clear side. Demonstrated:

<img src='/img/hot.png' style='float: left; clear: left;' /> Hot link 1<br style='clear: both;' />
<img src='/img/hot.png' style='float: left; clear: left;' /> Hot link 2<br style='clear: both;' />

Hot link 1

Hot link 2

Absolute and Relative Positioning

We can also directly control the position of an element on the screen. We do this with the following properties: position, top, bottom, left, and right. The last four of those properties obviously control the placement of the edges of the element. The first controls how those placements are interpreted.

The position property can be assigned relative or absolute. When relative, the element takes up space where it normally would, but is drawn in a different spot. This is best visualized so see below.

Within this line of text, 
<span style='position: relative; top: 0.5em;'>two words</span>
are positioned differently.

We can see that the word we positioned moved, but the space reserved for it did not. It overlapped the words which were already in the area we moved it to. Relative positioning is best for when the element should be shifted by a small amount. Its best usage I have seen was used as a section header. A box with a border holds some content. The header in the first like is given a background of the same color as the border, and positioned relatively at -0.5 ems top. This of course moves the text up half a line providing a nice visual effect.

The other type of positioning is absolute. In this mode, the coordinates we give are absolute measurements from the matching edge of the container, by default the edges of the document. Be very careful with absolute positioning: It can be extremely difficult to maintain, and very easy for a browser's settings (such as font size) to break. Absolute positioning is best used in the technique described in the next section.

Relatively absolute positioning

The trick is that we can combine relative and absolute positioning, to choose from what point our absolute measures are relative to. Consider the following example:

<div style='position: relative; margin-right: 10em;'>
	<p>Adipiscing suscipit cursus maecenas...</p>
	<div style='position: absolute; right: -10em; top: 0; width: 9em;'>
		This goes on the right side of the container.
	</div>
</div>

This is an advanced technique, my method of choice for creating columns with CSS. Note the margin, which creates the blank space for the column to go into. (And if you recall earlier chapters, you will remember how much trouble the box model can give us here. In fact, this simple example is not cross browser compatible because of it.) The container is defined as position: relative and this gives all elements inside it a new measuring point for their position: absolute. The container is given a margin on the side, and the column os positioned inside of it. This also demonstrates a way absolute differs from relative: the element is removed from normal flow of the document. The space it would take up is relinquished, so we must make room for it, as we have done with the margin. This technique has issues, though, which we will explore in another chapter. It is also effected severely by the differences in box model renderings.

Margins as positioning

We can also use margins as a type of relative positioning. Rather than actual relative positioning, margins can move an elements content while also effecting the document flow. Margins function best when blank space is desired, that's what margins are! The relation between adding space, and knowing where to add it, can aid positioning greatly.