Jump to content

Clear left issue


son
 Share

Recommended Posts

I have a peculiar issue with the first <br clear="left"/> in a picture gallery where images float to the left (or on form where I floated labels to left) creating a massive space below the occurance while all following <br clear="left"/> do not do this... What reasons could that have?Son

Link to comment
Share on other sites

The behaviour of CSS properties on the "br" element, including "clear", is not specified, so browsers do all sorts of weird stuff with it. At that point where you need the clear, use a div instead, or better yet, the content that needs to be on the next line - wrap it in its own div and clear that very div.

Link to comment
Share on other sites

The behaviour of CSS properties on the "br" element, including "clear", is not specified, so browsers do all sorts of weird stuff with it. At that point where you need the clear, use a div instead, or better yet, the content that needs to be on the next line - wrap it in its own div and clear that very div.
That is really a bit of a pain. Creates again a lot of redundant data. I thought we should not use tables any more (which I generally don't), but then I sometimes long to the predictability of tables;-)Thanks, will think about it...Son
Link to comment
Share on other sites

IE8 and above supports display:table; and the rest of the table displays. If you're in a position to sacrifice IE7 and IE6, you might as well use that. Using tables for layout is bad, but table layouts are not bad :) .

Link to comment
Share on other sites

I have a peculiar issue with the first <br clear="left"/> in a picture gallery where images float to the left (or on form where I floated labels to left) creating a massive space below the occurance while all following <br clear="left"/> do not do this... What reasons could that have?Son
Although I have had issues with <br clear="left"/>, I have had good success with its CSS equivalent which i understand is supported in all major browsers
HTML<br class="clearboth">CSS.clearboth  {	 clear:	 both;  }

You can also use class="clearboth" as the style of the next element following your image, whether a P or a DIV.When there is greater browser support for :after pseudo element, you will have the option to attach that style to the last element before you need to clear....Guy

Edited by Guy Cousineau
Link to comment
Share on other sites

Both methods actually do not work for floated divs that contain an image and paragraph as:

<div><a href="page.php" target="_blank" onClick="return popup(this, 'Bildergalerie')"><img src="photo1.jpg" alt="photo 1" title="photo 1" width="250" height="167" /></a><p><a href="page.php" >Photo 1</a></p></div>

Wanting three in a row I have tried the solution with a parent div around a set of three and the clearboth solution... Both not working as they should, gap of first one still massive. Also I cannot sacrifice older IE (grhh)...Son

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...