CLEAR seems not to work 1

[Toman]

Hi
There was a part "News" on the web pages formatted very standard way

<P>
.. some text and possibly small pictures too
<br clear="both">	[i] to prevent overflowing of pictures[/i]
</P>
<HR>
and further paragraphs separated with <HR>follow.

After switching to CSS I wanted also to include HR to paragraph format definition, to simplify maintenance of pages

So I have a definition

P
	{MARGIN-TOP: 1px;
	... ;
	border-bottom-color : red;
	border-bottom-style : solid;
	border-bottom-width : 5Px;
	CLEAR :both;
}

It works, only doesn't prevent pictures from overflowing to the next para.
What am I doing wrong? Please help.
Thank you Tom

 

[BabyJeffy]

Hmmm... try clear:all; - it may do the trick for you?

Jeff

 

[BillyRayPreachersSon]

It should be clear:both, rather than all... Can you post your complete code - or a URL to view it, so we can see what is happening?

Thanks,
Dan

 

[Toman]

I've made a fragment of discussed page – to make it simpler to study - and put it on

http://radova.cz/blb/testpage.htm.

I don't know your resolution, so you must change the width of window to see an effect of overflowing.
Thank you for your interest.
Tom

 

[manarth]

firstly, your page doesn't validate. it needs a Doctype, and it needs all attributes to be in quotes (align="right" not align=right).
The W3C validator is

http://validator.w3.org/.

but the biggie is that clear is the partner to float; unless something is floated, clear won't do anything.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[Toman]

Well, so tell me please how to make the picture be floating and still stay at region of paragraph. Thanks Tom

 

[manarth]

any chance of a jpg of the effect you're trying to achieve? I'm not sure I quite understand how you'd like the page to look.

anyway; the code for floating something could look like:

<p><a href="..\images\13v.JPG" target="obsah"><img  height="160" alt="xxxx"  src="13.JPG" width="107" [COLOR=red]style="float:right;"[/color] /></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[Toman]

Suggested changes made on

http://radova.cz/blb/testpage.htm,

CLEAR still doesn't work.
Positioning of the picture is OK, only horizontal red line should not cross the picture, but go after it, like the grey line
Tom

 

[manarth]

because the red line is part of the paragraph (the border), the only way you'll achieve this is to put the image inside the paragraph, and also place a clearing element within the paragraph.

In other words, move the <br /> inside the paragraph tags.

<p><a href="..\images\13v.JPG" target="obsah"><img  height="160" alt="xxxx"  src="13.JPG" width="107" style="float:right;" /></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[COLOR=red]<br style="clear: both" />[/color]
</p>

btw, I noticed your <a href: href="..\images\13v.JPG"; the convention is to use "/", not "\". (i.e. href="../images/13v.JPG").

I can't remember offhand if this is a web standard or not (I do know this is the unix file system standard) - but it's used everywhere on the net, on both windows and unix/linux web servers, so it makes sense to stick with this standard.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[Toman]

Thanks to all
Toman