clear: both at the end of each container

[Marcin]

Hi!

I would like to use WYMeditor, but I need to use css float properties on some elements. That's the easy part, but I also need to automatically add

Code: Select all

<div style="clear: both"></div>

at the end of each container to prevent elements from standing out of the container area.

code can also be as follows:

Code: Select all

<div class="clear"></div>

An example of what I wish to achieve (using paragraph container):

Code: Select all

<p>
   content
   <div class="clear"></div>
</p>


I tried editing the JS file with no success, any hints?

[jfh]

Hi,

I'm not sure I correctly understand why you need these <div> elements, but currently they're not well supported by the editor (and I don't know if they will be supported in the future).

The only way to do this is to use XSLT at the server side: you store <p>content</p> in your database, and dynamically output <p>content<div class="clear"></div></p> via an XSL.
If you're used to working with XSLT, this is pretty easy.

Documentation about XSLT in PHP.

[Marcin]

Thanks, I solved the problem in the following way:

Code: Select all

<h1 style="border:1px solid red; float: left;">
   <img src="big_image.jpg" style="float:right;" />
   txt txt txt txt txt txt txt
</h1>

The solution makes it unnecessary to use clear: both;
Sorry for trouble;)

[Daniel_R]

Hi,

there are various ways you could automatically clear your floats without using extra markup, for example you could add this to your CSS:

Code: Select all



/*clear floats in modern browsers:*/
p { overflow: hidden}

/*clear floats in IE:*/
* html p { overflow: visible; height: 1%}


there is also this method:

Code: Select all

/*clear floats in modern browsers:*/
p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/*clears floats in IE:*/
* html p { height: 1%}


So if you use one of above methods, you don't need extra markup anymore.

[Marcin]

Thanks;)