YUI and CSS Vertical Positioning

• Category: Software Development
• Posted On: 12/29/2006
• Views: 6,874

I had some difficulty using the YUI library while controlling vertical positioning. Specifically, how to position header text at the bottom of a 3-column grid containing images. Find out what I did...

Overview

I have been wanting to use the YUI library in a project for some time now. Well, I finally found an opportunity and started putting the library to work. Of course, I started with the wonderful stylesheet "reset-fonts-grids.css" which was designed to reset all "Grade A" browsers to render a website's content similiarly. For example, if I specify a specific text size, I would want it to appear that way in all browsers. But, under normal circumstances, a specific font size may render differently as well as other features like positioning elements on a webpage, colors, etc.

My Problem With Vertical Positioning in CSS

Once I had read the documentation on positioning using the YUI "grids" I started coding a simple web page (see code below) that had a header ("hd"), a body ("bd"), and a footer ("ft") within a document ("doc"). I dove into the header to add a "block" ("yui-b") containing a grid with three columns ("yui-gb"). In these three columns, I defined the three columns as units ("yui-u" *"yui-u first" for the first column). The idea was a logo on the left, followed by a level one header in the middle, and another logo on the right prefixed with the text "Powered by". Simple enough? Nope.

There were two hurdles to jump: 1) the "Powered by" text needed to be vertical aligned with the top of the 2^nd logo and 2) the level one header needed to be vertical aligned at the bottom of the grid. After some wrestling with the CSS code, I found that aligning the logo image #hd3 img {vertical-align:top;} was the answer to #1. But, the solution to problem #2 remained illusive. I recruited our local graphics artist, since his love for CSS quirks and design problems are a forté. After looking at the problem, we made some unsuccessful modifications and he returned to his desk to search for answers. About 15 minutes later he came up with a solution proposed by "badboy.media.design" (a.k.a. Lucian Slantineanu - that's hard to spell Lucian! ... oh and you used the <i> instead of the <em> tag on your website). Step two in Lucian's suggestions worked. In the end, I had to specify the height of the header ("hd"), set unit "hd2" to be 100% height and relatively positioned, and set the level one header to inline display and absolutely positioned with "bottom: 0px; left: 0px;". The only problem I had with implementing the solution was that I had to specify the height of the header block rather than allow it to be dynamic based on its contents.

<link rel="stylesheet" type="text/css" href="yui/reset-fonts-grids.css" />
<style type="text/css">
   #hd { height: 50px; }
   #hd2 { height: 100%; position: relative; }
   #hd2 h1 { display: inline; position: absolute; bottom: 0px; left: 0px; }
   /* Other styles omitted for the example... */
</style>
<div id="doc">
 <div id="hd">
   <div class="yui-b">
      <div class="yui-gb">
         <div id="hd1" class="yui-u first"><img src="logo.gif" alt="Logo" /></div>
         <div id="hd2" class="yui-u"><h1>An Important Header</h1></div>
         <div id="hd3" class="yui-u">Powered by <img src="logo2.gif" alt="Logo2" /></div>
      </div>
   </div>
 </div>
 <div id="bd">
   <div id="yui-main">
      <div class="yui-b">
         Main content of the page...
      </div>
   </div>
 </div>
 <div id="ft">Footer of the page...</div>
</div>