...

View Full Version : clear: both; & <br clear="all" /> - Strange Behavior



Uzair
11-18-2008, 12:18 PM
Hi Experts,

I am facing a very strange problem. I aligned H1 tag & a div using floats. Then I used to put my clear div below H1 & div (like this... <div class="clear"></div> ). It doesn't look fine in all browsers. Then 1 of my friends suggested me to use "<br clear="all" />" instead of that CLEAR div. I used this method & it worked but in IE 6 & 7 the text touches the bottom now. I again pasted my CLEAR div along with the BR & now everything looks fine in all browsers.

I just wanna know that what is the problem with my CLEAR div & why I need to use both methods same time? I read somewhere that BR method is not valid in STRICT xHTML.

Please see my attached code also to have a clear idea of what the problem is.

Looking forward for your help & guidance...

Regards,
Uzair

abduraooft
11-18-2008, 01:07 PM
Then 1 of my friends suggested me to use "<br clear="all" />" instead of that CLEAR div. Not really. A <br> tag always produce an unwanted line break when used to clear the floats. Also , the clear attribute is a depreciated one.

www.positioniseverything.net/easyclearing.html will help you to learn the common practices in clearing a float.
btw, Can we have a link to your page? (little lazy to download and test your code.)

PS:
I need to use both methods same time? I read somewhere that BR method is not valid in STRICT xHTML. br can be used in xhtml too, but we need to use it like <br/>

Uzair
11-18-2008, 01:24 PM
I haven't yet uploaded it anywhere. Please download it & see :)
I wanna use the CLEAR div instead of the BR. But currently I am forced to use both.

abduraooft
11-18-2008, 02:32 PM
I've looked your code, and I think you've a little confused about the use of clearing. I don't see any point in applying a clear in

<div class="grayBar">
<h1>Main Heading here</h1>
<div>2 items in <a href="#">your cart</a></div>
<br clear="all" />
<div class="clear"></div>
</div>
I'd recommend you to have a look at http://www.codingforums.com/showthread.php?p=617640#post617640 to get a clear idea.

PS: Are you trying to stick your footer at the bottom?

Uzair
11-19-2008, 10:44 AM
Thanks for your reply. You are right, I am confused but my confusion is for the <br clear="all" /> thing.

Well, I usually only use <div class="clear"></div> under the floating divs. But in this case, I also applied <br clear="all" /> to organize my GRAYBAR. I just wanna know why I need a <br clear="all" /> here. Don't you think that only the <div class="clear"></div> should work fine?

This is the only confusion I am facing. Please guide me...

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum