Forum closed. New forum available at http://community.wymeditor.org/

clear: both at the end of each container

Support forum for WYMeditor.

clear: both at the end of each container

Postby Marcin on Tue Oct 10, 2006 12:29 pm

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?
Marcin
 
Posts: 3
Joined: Tue Oct 10, 2006 12:21 pm

Postby jfh on Tue Oct 10, 2006 7:13 pm

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.
User avatar
jfh
Site Admin
 
Posts: 370
Joined: Sat Sep 23, 2006 8:43 pm
Location: Belgium

Postby Marcin on Wed Oct 11, 2006 6:40 am

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;)
Marcin
 
Posts: 3
Joined: Tue Oct 10, 2006 12:21 pm

Postby Daniel_R on Wed Oct 11, 2006 9:24 am

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.
Daniel_R
 
Posts: 10
Joined: Wed Sep 27, 2006 12:19 pm

Postby Marcin on Tue Nov 14, 2006 4:59 pm

Thanks;)
Marcin
 
Posts: 3
Joined: Tue Oct 10, 2006 12:21 pm


Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron