CSS: preserving padding next to floated element

R

Rik

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:
CSS:
p{
margin: 10px 0px 5px;
padding: 0px 40px;
border: 1px solid lime;
}
h3{
margin: 15px 0px 15px;
}
.comment{
float:left;
clear:left;
width: 250px;
height:200px;
border: 1px solid lime;
}

(border added to observe the results).

HTML:
<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
margins.

Does anyone know a reasonable solution for this?

Grtz,
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,776
Messages
2,569,602
Members
45,185
Latest member
GluceaReviews

Latest Threads

Top