Mar 212011
 

A good implementation of a web design is built on div and span tags. But they really come together in the CSS styling definitions. Keeping your layout parameters limited to alignments and floats results in a design that scales optimally on various resolutions, platforms and browsers. This way, you can make your design look good even on a mobile phone.

However, as a front-end designer, you sometimes find yourself in need of the more advanced placing methods CSS offers. For example, you could be looking for a way to include a graphic in a div tag, somehow aligning with the running text on the one hand but positioned "independently" on the other.

A Menu

If you are building an menu like this (where the flags denote articles in Dutch):

you want the text in the menu items to align to the left, and at the same time to align the flags to the right. Building this menu using div and span tags allows you to natively include hr tags to separate the various sections of your menu:

<div id="left_menu">
<a href="/">
<div class="left_menu_item"><span>Home</span></div></a>
<hr />
<a href="/mediatraining/">
<div class="left_menu_item"><span>Media-trainingen</span>
<img class="flag" src="/portal/graphics/design/gp_icon_flag-NL-21x14.png" width="21" height="14" alt="in Dutch" title="in Dutch" />
</div></a>
<a href="/frictie/">
<div class="left_menu_item"><span>FrICTie blog</span>
<img class="flag" src="/portal/graphics/design/gp_icon_flag-NL-21x14.png" width="21" height="14" alt="in Dutch" title="in Dutch" />
</div></a>
<a href="/friction/">
<div class="left_menu_item"><span>FrICTion blog</span></div></a>
<hr />
<a href="http://www.cio-business.nl/" target="_blank">
<div class="left_menu_item"><span>CIO Business</span>
<img class="flag" src="/portal/graphics/design/gp_icon_flag-NL-21x14.png" width="21" height="14" alt="in Dutch" title="in Dutch" />
</div></a>
<a href="/Columns_CIO/">
<div class="left_menu_item"><span>Columns CIO</span>
<img class="flag" src="/portal/graphics/design/gp_icon_flag-NL-21x14.png" width="21" height="14" alt="in Dutch" title="in Dutch" />
</div></a>
<hr />
<a href="http://www.chiplist.com/" target="_blank">
<div class="left_menu_item"><span>The ChipList</span></div></a>
<a href="/GPGPU/">
<div class="left_menu_item"><span>GPGPU</span></div></a>
<a href="/Testing_Semiconductor_Memories/">
<div class="left_menu_item"><span>Testing Memories</span></div></a>
<a href="http://portalbuilders.pro/" target="_blank">
<div class="left_menu_item"><span>PortalBuilders.pro</span></div></a>
...
</div>  <!-- left_menu -->

Floating is Not Aligning

A first solution might be to float the flag image to the right within the div defining the menu item. If you are lucky, this might work for you, at this moment, in your current browser, on your current platform…

The problem is that floating is not the same as aligning. Floating a tag takes it out of the current text flow. So in a different browser you might end up with a menu like this:

Or this:

In general, do not use float when you mean align, and make sure you understand the difference between the two: The alignment defines the direction of the flow within an element, while a float takes an element out of the current flow.

Positioning

Now, back to our problem: the alignment of the flags within the menu items. To get this in good order, we use neither alignment nor floating. Here we deploy the positioning of elements:

div#left_menu div.left_menu_item {
  position: relative;
  ...
  }

div#left_menu div.left_menu_item img.flag {
  position: absolute;
  top: 2px;
  right: 10px;
  ...
  }

Setting the position to absolute allows us to use the top, bottom, left, and right parameters to explicitly align the flag relative to its containing element (or more precisely: the first containing element that has a position other than the default static; here: the menu_item div). Since we do not want to take the menu item block from the normal flow, we set its position to relative, but do not set the other positioning parameters.

W3Schools provides more information on floating, aligning, and positioning.

Leave a Reply