Positioning Content Precisely using CSS

In the Headway grid layout system, blocks align at their top margins to sit together in a row – taking advantage of the CSS section-based layout system. This is a very good thing. However, it means that if two items are in close proximity in the grid, but one under another, the lower block item will be asked (not politely) to be on a different row, which pushes that lower block down under the blocks on the upper row. Disconcerting!

Sometimes you can adjust the horizontal spacing between blocks to communicate clearly to the grid rendering engine what your intention is (which row you wish your block to be on, shared with which other blocks.) That’s a nice thing that helps a bit to make you feel more in control. But, that doesn’t make all possible layouts, well, possible!

The way around this – and to take TOTAL CONTROL over your blocks – is to use the positioning capabilities built into CSS. These positioning capabilities allow you to grab hold of a block and position it ANYWHERE on the page that you wish!!! So, if the row/grid system is saying, “You sit down there, under us!” to a block you want to sit alongside them, your block can rise to the occasion and show them just what’s what!

Here, in a nutshell, are the primary CSS tools used to position items:

static Elements renders in order, as they appear in the document flow. This is default. (BORING!)

absolute The element is positioned relative to its first positioned (not static) ancestor element (WE LIKE!)

fixed The element is positioned relative to the browser window (WE LIKE!) (but…) (IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.)

relative The element is positioned relative to its normal position, so “left:20px;” adds 20 pixels to the element’s LEFT position. “left:-20px;” subtracts 20 pixels from the element’s LEFT position. (WE LIKE A LOT!)

inherit The value of the position property is inherited from the parent element (Not in IE7 – Not used easily in IE8 as !DOCTYPE must be set. OK in IE9. Avoid, I say.)

The related, very useful and important settings:

margin:

Especially margin-left and margin-top when used in position:relative mode. Set in pixels (px). However, see top and left below.

z-index:

Allows layering – must be applied to all items involved in the layering. Requires position: to be set to one of the above values.

top: and

left:

Sets position from corner of browser (absolute – first ancestor usually is the browser html tag, or the top-left corner at 0,0) OR from corner of any element the item is sitting inside of in the ID/Class hierarchy (relative). Use instead of margin-top or margin-left for more flexibility with all modes. Set in pixels (px). Can also be set as a percentage.

Now that you have the most important modifiers, here’s some CSS:

#block-ID {
position:relative;
left: some number in px or percent;
top: some number in px or percent;
z-index:level in the layer hierarchy - lower numbers are under higher numbers
}

OR

.block-type-whatever .custom-class .item-number-class {
position:relative;
left: some number in px or percent;
top: some number in px or percent;
z-index:level in the layer hierarchy - lower numbers are under higher numbers
}

You can play with position:absolute; or position:fixed (note caveats above for fixed)

Watch the video from the Tips and Tricks section to see how to use the arrow keys in Firefox or Chrome’s Inspect Element to make positioning fun! (…And grab the numbers and settings you want!) Note how I used margin-left and margin-top in that, but you can get the same result with left: and top: in relative mode. Total crazy control over the whole page in absolute mode!! Negative numbers are allowed in all cases.

So, I hope you’re “getting it” that where the grid and row system sends your blocks is of little consequence as pertains to WHERE YOU CAN PLACE THOSE BLOCKS!!!! You can place them anywhere. This is like layout on steroids.

I hope this was helpful. I’ll make another video going deeper into this if people ask for one.