Absolute Layouts

From CSS Discuss

Jump to: navigation, search

See also: Css Positioning

Contents

Layouts

Absolute Positioning

 position: absolute;
 top: 30px; /* 30 pixels from the top of the page */
 left: 80px; /* 80 pixels from the left hand side */
 width: 100px; /* Always set a width for absolute positioned block level elements, such as divs */
 border: 1px solid red; /* So we can see what is happening */

The key things to note are that a width is, while not required, a very good idea, and that you can use any pair of positioning properties. You could, for example, use top: 30px and right: 10px to have an element appear in the top right hand corner of the screen. Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this.


Measurements

While the example above uses pixels, it is also possible to position things using em and percentage units. These have their own advantages and disadvantages. Ems are a very useful measurement as, unlike pixels, they change their size depending on the font size the user has selected. Scalability is a good thing, so ems should be considered whenever pixel perfect design accuracy is not required. Note however that if you are positioning things in a design that uses decorative images pixels are more or less essential, as image sizes do not change when the user scales their font. (see Using Ems , Using Pixels )

Relative to what, exactly?

The CSS2 specification tells us that an absolute positioned element is "assigned a position with respect to a containing block". This is not particularly clear - what it actually means is that the element is positioned with respect to the "nearest" containing block that is itself positioned using either position: absolute; or position: relative;. This defaults to being the body or html element (depending on who you talk to), so the usual result is that the element will be positioned relative to the overall page. It does, however, introduce a very useful trick for positioning elements relative to some other element on the page...


Say for example you want to display a small question mark on the right hand side of a header somewhere, but you don't know where in the page that header will appear (this is a slightly contrived example but it will do for demonstration purposes). Consider the following:

h3 {
  position: relative; /* So that elements INSIDE this header can be positioned relative to the header */
}
h3 span {
  position: absolute;
  display: block; /* So we can give the element a width */
  top: 3px;
  right: 3px;
  width: 10px;
}

<h3>Some header <span>?</span></h3>

The position: relative; on the h3 allows the span (which is inside the h3) to be positioned relative to the containing header, rather than the overall page.

This technique can produce mixed results different browsers (mainly IE), so it's a good idea to test extensively if you use it.

Using position: absolute for layouts

Using position: absolute, simple but powerful layouts of both two and three columns can be easily achieved. In fact, there is no reason to limit yourself to column layouts but since those are the most widely requested they are the ones covered here.


The key trick to creating layouts with absolute positioning is that you do not need to use position: absolute on everything. Instead, you can create space on the page by applying margins, then use absolute positioning to "fill" that space.

2 Column Layout

div#main {
  margin-left: 20%; /* Create space on the page for the menu */
}

div#menu {
  position: absolute;
  top: 1em;
  left: 1%;
  width: 17%;      /* Must be less than 20% or the menu may overlap the content */
}

<div id="main">
<p>Some Content goes here</p>
<p>content goes here</p>
<p>content goes here</p>
</div>

<div id="menu">
<p>the menu</p>
</div>

3 Column Layout

div#main {
  margin-left: 15%; /* Space for the left menu */
  margin-right: 15%; /* Space for the right menu */
}

div#menu1 {
  position: absolute;
  top: 1em;
  left: 1%;
  width: 13%;
}

div#menu2 {
  position: absolute;
  top: 1em;
  right: 1%;  /* Because top and right are defined, appears in top right */
  width: 13%;
}

<div id="main">
<p>content goes here</p>
<p>content goes here</p>
<p>content goes here</p>
</div>

<div id="menu1">
<p>the left hand menu</p>
</div>

<div id="menu2">
<p>the right hand menu</p>
</div>

Watch out for overlaps!

The single biggest potential problem with absolute positioning is that, if you aren't careful, absolute positioned elements can overlap unpositioned (or even other positioned) elements on the page. The margin technique is the most widely spread method of avoiding this, and has a very good track record.


Advantages of Absolute Positioning

  • Full control over where elements are positioned on the page - much more control than is possible with tables.
  • The order of the divs in the HTML source code doesn't matter - once something is absolute positioned it is "pulled out of the flow" of the document, so it can be placed pretty much anywhere in that document. This allows you to have your content before your navigation structures, which is good for accessibility and good for search engine optimisation.


Disadvantages of Absolute Positioning

  • Elements can end up overlapping if due care is not taken - especially when the user dramatically resizes the page.
  • The footer problem. If you have a layout which uses absolute positioning for one of the columns, there is no way of creating a footer that spans the whole of the bottom of the page without risk of it being overlapped by the absolutely positioned column should that column be longer than the non-positioned column. The solution is either to ensure the static column has more content than the absolute positioned one, or to restrict the footer to taking up space at the bottom of the static column rather than spanning the whole page. See also Footer Beneath Sidebar
Personal tools