Skip to main content
Ben Nadel at the New York ColdFusion User Group (Sep. 2009) with: Hansjorg Posch
Ben Nadel at the New York ColdFusion User Group (Sep. 2009) with: Hansjorg Posch ( @tunesbag )

eCard Layout Using Absolute And Relative CSS Positioning

By on

Yesterday, after I opened my free ColdFusion eCard section, someone asked me how the cards were layed out. While, mine is a bit more complicated (since multiple cards share CSS rules and then overwrite for their own particular layout), this is the basis for all of the eCards:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<title>eCard Display Demo</title>

	<!-- Set page styles. -->
	<style type="text/css">

		div.ecard {
			border: 2px solid red ;
			position: relative ;
			height: 120px ;
			width: 245px ;

		div.ecard p {
			font-family: verdana ;
			font-size: 11px ;
			margin: 0px 0px 0px 0px ;
			overflow: hidden ;
			position: absolute ;

		div.ecard {
			border: 2px solid gold ;
			left: 10px ;
			top: 10px ;
			width: 105px ;

		div.ecard p.from {
			border: 2px solid pink ;
			left: 125px ;
			top: 10px ;
			width: 105px ;

		div.ecard p.message {
			border: 2px solid blue ;
			left: 10px ;
			top: 40px ;
			width: 220px ;


		Some intro text.

	<div class="ecard">

		<p class="from">
			To: Samantha
		<p class="to">
			From: Ben
		<p class="message">
			Hey Sam, did you catch the last episode of Heroes?
			It's getting pretty cool. I can't wait for a real
			serious face off between Peter and Sylar. That's
			gonna be craaaazy!!


		Some footer text.


If you were to browse that in another window, it would look this like this:

CSS Positioning Using Absolute And Relative Styles

Notice that the HTML markup which is very "information oriented", once displayed, has a highly formatted layout. What is the secret to this black magic? Relative and absolute positioning. Understanding these two and how they interact has truly changed the way I build web page layouts.

When an element is defined as having an "absolute" positioning, this means that it is positioned absolutely in relation to its closest "positioned" parent. What does it mean for an element in the DOM to be "positioned"? Well, all nodes have a default position of "relative"; however, an element is not considered "positioned" until it has an explicit positioning. This CSS rule can be for relative or absolute positioning. See this graphic for some more detail:

CSS Positioning Using Absolute And Relative Styles

Taking that, my eCard layout becomes very clean. The eCard DIV is positioned relatively. This allows its own layout to be inline with the natural flow of the document. The nested paragraphs have an absolute positioning. This allows them to be positioned absolutely relatively to the div (their closest positioned parent) which means that both the DIV and the nested P tags will have a highly formatted layout and yet still flow with the natural layout of the document.

Want to use code from this post? Check out the license.

Reader Comments



What do you mean? If you tell me what a "proper, semantic test code" is, I will be more than happy to provide it.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel