Formatting DIV to the right of a FLOAT LEFT problems with padding and lists
===

I have a quandary. I have an application where CSS seems to do what it is supposed to do, but does not show results as you would expect and I can find no solution to get the "expected" results.  The issue is how content is flowed when there is a float element to the left of the content and the content styles use padding or margins. 

In my application, users can enter text in a DIV.  There may or may not be a float left element so that the div with the text can either be at the left of the body area or shifted to the right (i.e. after the floating element). 

When there is no floating element, the text is fine with paragraphs (i.e. with divs and appropriate classes) that are left, indented, first line indented, or hanging.  

![Sample Paragraphs][1]

The CSS for the paragraphs are:

    .firstindent { text-indent:30px; }
    .indent { padding-left:30px; }
    .hanging { padding-left:30px; text-indent:-30px; }

However, when a a float left element is added, only the standard and first indent show properly.  This is because padding, borders, and margins are outside the box model "content" and only items in the "content" area are adjusted for the float. 

>Floats. In the float model, a box is first laid out according to the normal flow, then >taken out of the flow and shifted to the left or right as far as possible. Content may 
>flow along the side of a float.

If you use Firefox with Firebug, you can highlight the divs and you will find that the padding is shown at the left edge, i.e. "underneath" the floating element, not adjusted to the right of the floating element. 

As a result, the paragraphs with a float left element look like this: 

![Problem Paragraphs and Lists][2]

(Note that the float element also effects the presentation of lists.)

So far, I have not been able to come up with a CSS solution that lets me set the main text contents and then have them properly display whether or not there is a float left element to the left.  

I have posted a full HTML sample so please feel free to snag the source and see if you can find a solution! [Sample Page][3]


  [1]: http://i.stack.imgur.com/7N9Ax.jpg
  [2]: http://i.stack.imgur.com/7cyRh.jpg
  [3]: http://www.villaakumal.com/FloatLeftAndPadding.html