Spent enough time trying different methods across the web but only 1 article worked for me using the "push" div layer. Loosely based on Ryanfait: Make a Footer Stick to the Bottom of the Page

Aim:

Header
Left	Right
Footer

<div id="container">
     <div id="header"></div>
     <div id="content">
          <div id="left"></div>
          <div id="right"></div>
          <div class="push"></div>
     </div>
     <div id="footer"></div>
</div>

Situation
The header displayed fine. The left and right columns finally got them side by side. But the footer that has a background image was under the left and right columns... The main content layer was overlapping the footer. I tried various z-index's bearing in mind that the footer has to be behind because the main content had a semi-transparent layer that overlapped it half-way.

I managed to fix this by including a div push layer which clears both (even though i had clear:both on the css for my #right div layer). For some reason, it has a more forceful effect in its own separate layer.

Add horizontal space between label and fieldset

fieldset label.inline { display: inline-block; margin-left: 2em; }

Change color of fieldset grouping line

fieldset { border: 2px ridge #7abcff; }

---

Quick note in case I spend as long as I did again.

A Client had some clouds on the background of his photoshop file for his website. They were to be positioned in the top right corner with the leftmost tip aligned to the right of a central content section. I separated off the clouds as another div layer, specified the width and height and specified it's left. It caused the horizontal scrollbar which is a bit annoying because you scroll to the right and theres nothing but some background image. Also the footer was at 100% so it got cut off if you scrolled horizontally.

Aim / Objective
To have a background of sky and grass with a centered content section (white semi-transparent layer) of 900 pixels width as shown in the following picture:


And I want the clouds as another layer ontop aligned to the top right:

What?
A quick article to remind me on how create an multi-level ordered list that indents and aligns correctly.

Why?
I'm finding that I need to do this quite often for some clients who want to include their terms and conditions in quote/invoice templates and want the HTML to be indented neatly.

Other examples out there will work, but I found that once the list count increased the number of digits (eg. 1.10) the text would be more indented (relative) to 1.1. I need all list elements to be all perfectly aligned.

// What I Have

1.   Item 1
     1.1   Item 1a
     1.2   Item 1b
     ... 
     1.9   Item 1c
     1.10   Item 1d
2.   Item 2

// What I Want

1.   Item 1
     1.1   Item 1a
     1.2   Item 1b
     ... 
     1.9   Item 1c
     1.10  Item 1d
2.   Item 2

// What I DON'T Want  (happens if you use list-style-position: outside)

1.   Item 1
      1.1  Item 1a
      1.2  Item 1b
      ... 
      1.9  Item 1c
     1.10  Item 1d
2.   Item 2

How?
I've been refining this based on several examples and the following solution seems to be the most stable: