I have a predicament. I have an application where CSS seems to do what it should do, but does not show results, as expected, and I cannot find a solution to get the expected results. The problem is how the content flows when there is a float to the left of the content, and padding or margins are used in the content styles.
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 located to the left of the body area or shift to the right (that is, after the floating element).
When there is no floating element, the text is in order with paragraphs (i.e. with div and corresponding classes) that are left, indented, indented on the first line or hanging.
CSS for paragraphs:
.firstindent { text-indent:30px; } .indent { padding-left:30px; } .hanging { padding-left:30px; text-indent:-30px; }
However, when an item is added to the left with a float, only the standard and first indentation are displayed. This is due to the fact that the filling, borders and fields are outside the "model", and only elements in the "content" area are configured for the float.
floats. In a model with a float, the box is first laid out in accordance with the normal flow, then> is removed from the stream and moves left or right as far as possible. Content can flow along the side of the float.
If you use Firefox with Firebug, you can highlight divs and you will find that the indentation is displayed on the left edge, that is, "below" the floating element, not adjusted to the right of the floating element.
As a result, paragraphs with the left float look like this:
(Note that the float element also affects the presentation of lists.)
So far, I have not been able to find a CSS solution that allows me to set the main text content and then correctly display if there is a left element with a float on the left.
I have posted the full HTML sample, so please feel free to fool the source and see if you can find a solution! Page example
Thanks. I should have included "what you expect." Here it is with the float to the left, and the float to the left.