Wednesday, December 16, 2009

Horizontal Div Tags

The major hurdles when I faced during developing my first web applications were numerous. One of the first few where posing a decent UI on the browser.

There I had think of a way to arrange certain stuffs on a particular section of a page where I could not use tables 'cos of alignment issues and other cross browser issues.

The following is a simple example code to show div tags horizontally. Though it is simple believe it took me more than an Hour to understand the way the position attributes work. The Secret is the usage of style='float:left' property

If you guys feel 1 hour is not enough to learn this particular stuff, perhaps try the trick which I went through : http://www.barelyfitz.com/screencast/html-training/css/positioning/

<div id="whatever">
  <div style='float:left; margin:1 1em'> content </div>
  <div style='float:left; margin:1 1em'> content </div>
  <div style='float:left; margin:1 1em'> content </div>
</div>

No comments:

Post a Comment