I've always found CSS positioning with both float and position: absolute/relative hard to work with. I want to introduce to you an alternative way borrowed from the World of Warcraft Interface: Anchors.

Anchor

The concept is extremely simple. You can tell where you want the element to be, relative to another. For example, top left of this blog's main content is 10px right relative to the top right of the menu.

<frame name="Content">
  <anchor point="TOP LEFT" relativeTo="Menu" relativePoint="TOP RIGHT" x="10" />
</frame>
  • Allowed points:
       TOP LEFT ,  TOP   , TOP RIGHT
           LEFT , CENTER , RIGHT
    BOTTOM LEFT , BOTTOM , BOTTOM RIGHT
  • Default Values:
    • point, relativePoint: TOP LEFT.
    • relativeTo: Parent of the element.
    • x, y: 0.

Demo

I've made a quick implementation of this behavior in HTML using data-attribute. Check the Javascript tab to see the 35 lines of CoffeeScript that makes the following code work:

<!-- In order to put the sidebar centered at the right of the frame:
  Sidebar.left = Frame.right                                          -->
<div id="sidebar" data-anchor="left, #frame, right"></div>
 
<!-- In order to put the chat at the top right of the screen:
  Chat.topRight = HTML.topRight + {x: -10, y: 10}                       -->
<div id="chat" data-anchor="top right, html, top right, -10, 10"></div>

Limitations

Static

The current code works well for static elements. As there isn't any event for DOM move/resize, the position will not be updated if anything moves 🙁

It might be possible to achieve the same effect by setting properly the position: absolute/relative and top/bottom/right/left CSS properties. I'd be really interested to know if you try to tackle this challenge 🙂

CSS Attribute

It would be more semantically correct to add an anchor CSS attribute instead of an HTML data attribute. However, it's not possible to access the value of a custom CSS property.

#sidebar {
  anchor: bottom left #frame top right 10px 0;
}

Multiple Anchors

World of Warcraft supports multiple anchors. For example if you anchor both the left and right sides, then the width of the element is going to be updated accordingly.

If you liked this article, you might be interested in my Twitter feed as well.
 
  • Pingback: Relative Layout Positioning on the Web | FunctionSource Development()

  • http://blog.niccai.com/ NICCAI

    It's pretty easy to achieve the positioning you have in your example with just CSS (no JS). Here's an example of how to do the sample from the Fiddle above. I didn't bother to run through the other possible permutations of the HUD layout, but it would be pretty easy to do this with a simple set of classes and class extensions -.hud .hudChat, etc.

    http://goo.gl/3yVEZ

  • http://blog.vjeux.com/ Vjeux

    Thanks for showing the examples in full CSS. This highlights the starting point of my article: it is not intuitive at all.

    You are using "display: inline-block" and "vertical-align: middle" to do the first one and "position: absolute; right/top" for the other.

    In order to simulate all the available behaviors given by the anchor "API" you have to use a lot of CSS tricks and have a deep knowledge of DOM positioning.

  • Pingback: Anchor positioning | Supernaturalro()

  • airtonix

    Your example would better be served by using Lua instead of the horribly limiting XML fashion of WoW UI Addons.

 

Related Posts

  • August 23, 2011 Javascript – Hook Technique (5)
    Let's go back 5 years ago during the World of Warcraft beta. I was working on Cosmos UI, a projects that aimed to improve the World of Warcraft interface. As interface modification was not officially supported by Blizzard, we went ahead and directly modify the game files written in […]
  • September 14, 2011 CSS – One Line Justify (24)
    I came across a CSS problem, text-align: justify does not work with only one line. Justify behavior The reason is because it has been designed with paragraphs in mind. It justifies all the lines but the last one. Normal Justify Lorem ipsum dolor sit amet, consectetur […]
  • August 20, 2011 Idea – mouseFreeze – A solution for Browser FPS Games (8)
    There is an open problem in porting real game into the web browser related to cursor handling. Problem Many games such as First-Person Shooters require the mouse to freely move, without the constraints of screen edges. However there is no such API in the browser to make this […]
  • June 8, 2012 CSS – Absolute position taking into account padding (6)
    When looking at the code of Lightbox.com I remarked that they are not using top and left in order to position their images but margin-top and margin-left. I've been wondering why for some time and finally found the reason. It is a way to position absolutely elements in a container and […]
  • September 11, 2011 World of Warcraft HTML Tooltip Diff (0)
    MMO-Champion is a World of Warcraft news website. When a new patch is released, we want to show what has changed in the game (Post Example). An english summary of each spell change is hand written, but we want to show the exact tooltip changes. jsHTMLDiff is available on […]