CSS Layout and Positioning

Written by MPS Consultant Xing Su – for more help with this topic, visit Xing at the MPS during his scheduled hours, visible on our Live Schedule.

This is just an introduction to layout and positioning techniques in CSS (Cascading Style Sheets), which is one of the most essential and powerful components of web design that enhances content accessibility, aesthetic appeal, as well as formatting and presentation control.

We will begin with the simple box model to graphically demonstrate the different attributes designers can assign to customize layouts.

There are a variety of properties that we can define for a given block element:

Before going into the specifics, we must first be comfortable with the measuring units used in CSS. The three most commonly used units are percentages (%), ems (em), and pixels (px).

• % is pretty intuitive as to how it works: it simply adjusts the size relative to the parent element.
• em is defined relative to current font-size of the element. For instance, if you defined font-size: 20px, then 1em = 20px.  Some think of it as roughly equal to the width of the capital letter “M”.
• px works exactly how you would expect it to work, it specifies the size according to exact pixel measurements given; thus it is an excellent choice to create fine-grain control over your elements

The position property has several different values/options that we can choose from:

• static – If property is unspecified, static positioning is automatically applied, which is the default positioning attribute that browsers apply to content. The content flows one piece after another
• absolute – This positions the element at locations specified by the properties top, right, bottom, left with specific values usually in either em or px. For instance,

position: absolute;
top: 10px;
left: 10px;

• This would place a particular block element 10 pixels down from the top of the page and 10 pixels away from the left edge of the page, counting from the top left corner of the page.
• Bottom and right work in a similar fashion except for the points of reference. Graphical demonstration of these properties can be found in the diagram above.
• The absolute property is a good way to position an element if the positioning of rest of the content is irrelevant to the element in question. However, because this property treats the particular element as separate, meaning the rest of the content behave as if this element did not exist at the particular location, accidental overlap may occur.
• relative – This positions a particular element without affecting the positioning of the surrounding elements. It treats an element as statically positioned and then the top, right, bottom, left are used to move the element in whichever direction relative to its original position.

• fixed – This pins a particular element at a particular location so that it doesn’t move if the user scrolls through the webpage
  • A good demonstration of this technique is at http://www.csszengarden.com/?cssfile=/213/213.css&page=0

margin, border, padding –

• These 3 properties work in a similar fashion, but just specify different areas of the particular element, as indicated by the diagram at the top.
• You can specify the top, right, bottom, and left part of each one to be a different value to produce a variety of different effects. When only two values are defined, they are the top-bottom and left-right pairs, meaning top and bottom are defined to be the same, left and right the same. Some examples of such commands are:

  	
  margin: 10px 5px 20px 15px;
  	
  border: 10px 15px;
  

• padding: 0px auto;
  • When auto is used, it simply means that, in this case, the left and right padding values will be automatically adjusted to touch the furthest edge possible, whether it is the edge of the parent element or the edge of a juxtaposed element, to be the same value .
  • The diagram below further demonstrates this.
    • It is produced with
      • margin: 45px 70px 10px 30px;
      • padding: 30px 48px;
      • border: 1px solid #F00
      • other graphical elements were produced for demonstration only.

width, height –

• These two properties simply specify the width and height of the content block, without padding, border, and margin.

float –

• This property will allow users to keep track of elements with definite size properties and position/flow them accordingly.
• float: left or  float: right would make a given element slide as far left/right as possible within its containing block/parent, as long as there is still enough space left to fit its width, or else it will slide down the page until it finds a space where it can fit.
• The following diagram helps demonstrate the principles behind float
  • Two elements are floated to the left.

• There can be problems with float, however, because it takes the elements out of the content flow. Designers must be extremely careful when defining the heights and widths of the container blocks so that the follow doesn’t happen.

There is not a set, always-correct way of managing layouts and positioning of different elements; it takes a lot of practice to master the technicalities and nuances of CSS, but it certainly is doable. You just have to keep your CSS organized in a logical fashion and take full advantage of the “cascading” aspect of CSS. Hope this has been helpful.