Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

eCard Layout Using Absolute And Relative CSS Positioning

By Ben Nadel on
Tags: HTML / CSS

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">
  • <html>
  • <head>
  • <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 p.to {
  • 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 ;
  • }
  •  
  • </style>
  • </head>
  • <body>
  •  
  • <p>
  • Some intro text.
  • </p>
  •  
  • <div class="ecard">
  •  
  • <p class="from">
  • To: Samantha
  • </p>
  • <p class="to">
  • From: Ben
  • </p>
  • <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!!
  • </p>
  •  
  • </div>
  •  
  • <p>
  • Some footer text.
  • </p>
  •  
  • </body>
  • </html>

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.



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

@Zoffix,

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

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.