|
|
Posted by Rik on 06/29/09 11:49
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,
--
Rik Wasmus
Navigation:
[Reply to this message]
|