Understanding CSS Positioning
By Diona Kidd on Apr 12, 2007 in CSS, Technical
There are generally four ways to position elements on a page.
- Position:static
- Position:absolute
- Position:relative
- Floats
- Margins
There are pro’s and con’s to each of these methods and it’s easiest to research before you start implementing. In addition, I often do sketches of the layout before starting to code HTML markup and CSS. Once you understand how the layout works, you can compensate for ‘future’ situations.
I’m super-lazy (in a good way), which means I don’t like to go back and fix issues because of simple changes. I’ve found certain methods of positioning to be particularly useful in making a design implementation scalable so I don’t have to go back and fix…
Position:Static
The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Position:Absolute
Absolute positioning is a little tricky until you get your head around it. An element is absolutely positioned relative to the position of it’s container element. This is a very important detail. If you have no parent element has a position attribute set (e.g. position: relative), then the first element set as position: absolute will be positioned relative to it’s positioned parent, the body.
To position an element absolutely relative to it’s parent, you need to add position:relative to the parent. Modern browsers will recognize that the parent where the parent is positioned and adjust accordingly.
Another important detail is that absolute positioning will remove the element from the document flow. Meaning that other elements won’t adjust for the size of an absolutely positioned element.
If you absolutely position your left nav and your content area is shorter than the nav, part of your left navigation will be hidden because it is not in the flow of the document.
Position:Relative
When you use position:relative, you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. You can also position elements absolutely within a block level element (e.g. - a div).
Floats
Floats depend on exact math, as does most layout styles in CSS. It’s easy to get items side-by-side using floats without knowing the height of each element. If you don’t know the width of an element, often times you get an unexpected result. Width can be pixel or a percentage. No matter what width is, it should be declared with a float.
Floats are flexible and scalable for content. If your client adds another chunk of text, your layout will adjust in height.
Layouts can break easily using floats if you’re not careful. Your calculations have to be exact or you will see content float below there area you intend for it to render. To compound the issue, IE seems to render margin/padding different than any other browser which sometimes causes layouts to break in IE while they work in other browsers.
Floats were not actually intended for positioning. They were originally implemented to make text flow around an image so a web page could look like a newspaper, but in the true nature of the web, we have transformed the use of this CSS attribute into something completely new. Mostly to get around short-comings of various browsers.
It is important to clear your floats for cross-browser layout or your container will not wrap around your contained elements. There are basically two ways to clear your floats. Either add a block level element below your last float with a style clear:both, or float your container. See the additional resources below.
Margins
I generally use margins for ‘nudging’ a layout or an element in a layout. There are some instances where say a left nav is positioned absolutely and the content has a margin of the size of the left nav + desired padding but if your content is less than the height of the left nav, you will need to add a ‘prop div’. A ‘prop div’ props the page open by having a static height. This isn’t really a scalable implementation.
Post a Comment