PmWiki | Test / CSSClearProperty

How to use CSS clear property to clear left or right only

>>rfloat<<
Attach:bushtrack.jpg
Attach:bushtrack.jpg
>><<
%lfloat%Attach:bushtrack.jpg
One of the best activities to do in New Zealand is tramping.
Tramping is hiking in the New Zealand bush.
%clear:left red%This text should be under the left image, but not under
the right images.

One of the best activities to do in New Zealand is tramping. Tramping is hiking in the New Zealand bush. This text should be under the left image, but not under the right images.

>>rfloat<<
Attach:bushtrack.jpg
Attach:bushtrack.jpg
>><<
%lfloat%Attach:bushtrack.jpg
One of the best activities to do in New Zealand is tramping.
Tramping is hiking in the New Zealand bush.
>>clear:left red<<
This text should be under the left image, but not the under right images.
>><<

One of the best activities to do in New Zealand is tramping. Tramping is hiking in the New Zealand bush.

This text should be under the left image, but not the under right images.

surely it is not this hard

>>rfloat<<
Attach:bushtrack.jpg
Attach:bushtrack.jpg
>><<
%lfloat%Attach:bushtrack.jpg
One of the best activities to do in New Zealand is tramping.
Tramping is hiking in the New Zealand bush.
(:div style="clear:left" red:)(:divend:)
This text should be under the left image, but not the under right images.

One of the best activities to do in New Zealand is tramping. Tramping is hiking in the New Zealand bush.

(:divend:)

This text should be under the left image, but not the under right images.

Could you attach an image(sketch) as how the layout should be. I could give a try.
VKrishn August 23, 2010, at 04:52 AM

the third (bottom) example largely achieves what I want, but having to use a "div" seems to be overkill. Perhaps we need some variants on [[<<]] which is break clear:both, in the standard markup, eg [[_<]] and [[<_]], thanks, Simon

Your proposed markup could help in some layouts, I guess complex layouts now can be done in html5. VKrishn August 24, 2010, at 02:54 AM

Thanks. I don't consider this to be complex at all, this is basic CSS. There is something missing in the way >><< and %css% work IMHO. I should not have to hard code image widths. simon August 25, 2010, at 05:31 AM

yes it can become difficult..

>>rfloat<<
Attach:bushtrack.jpg
Attach:bushtrack.jpg
>><<
>>lfloat width=314px<<
Attach:bushtrack.jpg\\
This text should be under the left image, but not the under right images.
>><<
%lfloat%
One of the best activities to do in New Zealand is tramping. Tramping is
hiking in the New Zealand bush.%%

This text should be under the left image, but not the under right images.

One of the best activities to do in New Zealand is tramping. Tramping is hiking in the New Zealand bush.