CSS: preserving padding next to floated element

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Hi guys,

I've got the following problem:
On a dynamically created page, there may be a floated element to the left of
some, text, or there may be none. The problem is: is have padding on the
left & right of <p>, which I'd like to preserve.

Stripped down code in this:
   margin: 10px 0px 5px;
   padding: 0px 40px;
   border: 1px solid lime;
   margin: 15px 0px 15px;
   width: 250px;
   border: 1px solid lime;

(border added to observe the results).

<div class="comment>some text</div>
<p>some other text</p>
<h3>Some heading</h3>

Now most browsers, correctly, shove the left part of <p> under the floated
element, so the padding of 40px is already satisfied by a floated element of
250px, and the text will be right next to the float. That isn't the desired
behaviour in this case.

Possible solutions tried:
- margin on <p>: does not work either
- margin-right on float: will not do in this case, as other elements (like a
<Hx>) could be next to the element and shouldn't have the padding.
- padding-left of 40px on a containting parent element, margin-right:40px on
float, and assiging negative margins on each element according to desired
lay-out. That (offcourse) also won't work because of the same reason: the
block level elements p and Hx will be shoved undeer the float, with their

Does anyone know a reasonable solution for this?

Rik Wasmus

Site Timeline