On Thu, Jun 7, 2012 at 9:09 AM, Chad Meyers <starlingdesig...@gmail.com>wrote:
> I have the the folowing html
>
> <p> .... </p>
> <p> .... </p>
> <hr />
> <p> .... </p>
> <hr />
> <p> .... </p>
> <p> .... </p>
>
> and inside the <p>'s there are floated images, and they are messing with
> the margin set on the <hr />'s I can fix this by adding a simple <div
> class="clear"></div> before each <hr />.
>
> I can't seem to figure out how. I have tried element.inject,replace,grab
> but none seem to work for me. any help?
>
> I thought something like this;
> var clearDiv = new Element('div.clear');
> $$('hr').inject(clearDiv, 'top')
>
<hr/> is not a block-level element, so I don't believe you can insert a div
at the "top" of the <hr/>. You could add it "before" the <hr/> though. Why
don't you just add some CSS to your <hr/>:
hr {
clear: both;
}
Or I also think you can add some CSS to your paragraphs (which I think will
fix the floating problem):
p {
overflow: auto;
}
Why? think WYSIWYG client input. ['what's a div?']
>
No clue what you're asking here.
Cheers,
~Philip
