Absolute positioning of content in a containing block

A less formal alternative title would be "Placing content from the middle of a box into a sidebar to the edge of a containing block"

Context

The problem first occurred when I tried to create a user style for a login page to accomodate small screens (Yes, there are people who use small screens).

The main problem was that I could not change the structure of the not-so-well designed page, so I had to resort to some unorthodox uses of formatting in CSS. Later it turned out ot have some interesting uses in a sister blog.

The basic [formatting] concept behind this is taking content out of normal flow, placing it as a sidebar into the top right edge of the container block, and then making sure that other content (mostly visible text) will then flow around the sidebar box.

While it may sound simple just like that, then implementing a working solution for the first time proved more difficult. The solution that I found out does work, but still contains some caveats. More about it later and below.

In-depth

What does not work

First off, just floating the box to the right is pointless, because the box is positioned according to normal flow and is floated where it's structurally positioned in the page (or text). It is then adjacent to that content which only follows the box in the page structure.

Adding a negative top margin is just as impractical, because it will never be accurate relative to the sidebar's position, as the position of the sidebar still depends on how much space is taken up by preceding objects or text, since relative renderings are always different, depending on fonts, rendering engines and zoom levels.

If you're modifying your own content, then putting the box before the content that initially preceded it defeats the purpose of normal text flow (as seen in Lynx).

The solution

Mostly assuming that the containing block and inner blocks are <DIV> elements, which I so dislike, because they are severely overused.

The points are here in a hierarchically continuous order, so as to present the logic and reasons behind it.

• The containing block,
  which is to enclose the sidebar and content that should surround it:
  Set its position to relative — This will keep absolutely positioned blocks inside the containing block; otherwise all absolutely positioned blocks will be taken out of all flow and will be (absolutely) positioned relative either to any preceding relatively positioned block in the page hierarchy, or the viewport, which is the topmost block.
• The sidebar's position must be set to absolute, with most important parametres set like this:
  
  <DIV STYLE="position:absolute; top:0px; right:0px; width:234px">Textual content<DIV>
  

  ^ top:0px and right:0px will place the sidebar box to the top right (to right of main content), where position is calculated from the containing block's top and right edges; width:234px — Here you can specify your own width for the absolutely positioned box.

• And finally, the tricky part — How to make sure that content or text surrounding the sidebar will show next to the sidebar without all of parts of it staying hidden under the sidebar?
  
  Well, my solution was to place the that content (which precedes the sidebar and is innards) into a relatively positioned DIV& box, with its right margin approximately the amount of the sidebar's width. This ensures that text or content inside that DIV won't stay under the sidebar.
  
  If the sidebar is long enough to encompass much of the content that follows, then that content should also be encased in a DIV with similar parametres: relative positioning and same margins.
  
  Caveats:
  • If much of the content left of the sidebar is text, then its flow is limited to the squares of DIV boxes (there must be at least two of them). Normally flowing text could then start well after the sidebar and DIV boxes end.
    
    Mitigating effects
    One way to mitigate this without creating separate DIVs and their left (or right) margins is to create a ghost DIV with same size properties as the sidebar floated right just under the absolutely positioned sidebar. This has better chances of taking effect if the sidebar's height and width are fixed and that the content is controlled server-side.
    
    Yes, the "ghost" DIV can contain about the same text, if there's a desire for that ghost DIV to follow the size of the primary DIV (think differences in fonts and zoom levels), but this then may defeat the purpose of having that text in the ghost sidebar, because it would be duplicating. Oh well, solutions can be made both with JavaScript and CSS to make sure this text doesn't appear twice in a text-only or very plain browser (think Lynx).
    
    Otherwise I was thinking of :before and :after pseudoelements, or of a way to insert a client-side Greasemonkey script.
    
    This is now the point where one can play around with various options.
    
  • I found another problem when editing text here in Blogger, where the sidebar height was greater than text next to it, so the sidebar, given that it was absolutely positioned, overlapped past the post tools area. In that sense it's a good thing to try out the size of the sidebar in the DOM Inspector, which allows client-side visual editing of webpage elements under inspection.
    
    One way to mitigate this would be wrapping all of the affected content, including some preceding the sidebar (where it visually starts) in a DIV and specifying a height greater than the height of the sidebar. The height of the DIV should then allow for some hypothetical differences in size.
  
  

This out-of-order sidebar solution works in Firefox 1.0 (Mozilla 1.7.xx, preferably SeaMonkey 1.1.19 or K-Meleon 1.5.4) and newer. It does not work in Internet Explorer 7 (or older), so a workaround must be in place, if there's a large IE-based audience in mind. It should probably work in Internet Explorer 8 or newer.