PDA

View Full Version : Clear:Both - Much Research Done, still questions...



Jim Nayzium
Nov 13th, 2006, 02:45 PM
I have combed the internet and spent a few hours reading this forum on the subject of clearing floats with a clear class or the :after code.

Everything I find is written by people who think IE is a bad scenario for not doing it the way standards meet up to etc...which I agree with, but because of that, I always leave those discussions pretty confused as to the best practice here...

I want have my divs float properly on IE and Firefox....Each discussion gets pretty scary when it starts discussing every scenario out there.

I realize I should be writing standards compliant code, so what is the rule of thumb / best practice today...for clearing your divs...

I currently am clearing them by including a <div class="clear"><div> at the end of each float I wanted cleared...

But all the discussion about how the div needs height or width to work in IE gets me confused....

Is it the empty div class=clear that needs the height or is it the floated one...

All the samples on the net I have found that are really simple...are pretty much only using things that are compliant now...assuming IE will respond (brokenly but nonetheless) as I would want.

My huge problem is I am of course a Mac user and I don't have access regularly to a windows machine for previews...(this problem is going to have to be solved soon if I keep getting more and more web-work...)

Everything I have read says that clear:both is not enough...that I need other things...like font-size, height / width....

can someone give me an answer that is worded like this...

here is the sample code--it works for Firefox / and IE....etc....

I would really appreciate it....

Here is my sample page thus far


<div id="inner-wrap">
<p>This begins the inner-wrap</p>
<div class="inner-wrap-centered">
<p>This is the inner-wrap-centered</p>
<div id="right">
<p>Right</p>
<div id="right-interior">
<p>This is the right interior</p>
<p>This is the right interior</p>
<p>This is the right interior</p>
<p>This is the right interior</p>
<p>This is the right interior</p>
</div>
<p>This is the right</p>
<p>This is the right</p>
<p>This is the right</p>
<p>This is the right</p>
</div>
<div id="left">
<p>Left</p>
<div id="left-interior">
<p>This is the left interior</p>
<p>This is the left interior</p>
<p>This is the left interior</p>
<p>This is the left interior</p>
<p>This is the left interior</p>
</div>
<p>This is the left</p>
<p>This is the left</p>
<p>This is the left</p>
<p>This is the left</p>
</div>
<div class="clear"></div>
</div>
</div>

ronaldb66
Nov 13th, 2006, 03:31 PM
Jim,

The issues about a clearing element (such as your div, or a p) are that it really is superfluous content which should--in an ideal world--not be necessary. To negate at least the visual impact of these, usually things like a 1px font size and line height and zero height, margins and padding are set to make the clearer element as minimal as possible.

The complete story on clearing floats is best described on "Positioning Is Everything": How To Clear Floats Without Structural Markup (http://www.positioniseverything.net/easyclearing.html). This also describes IE's non-standard "auto-clearing" facility and the necessity to set an arbitrary dimension to put it into effect.

ronaldb66
Nov 13th, 2006, 03:35 PM
By the way: could you try to remove the other, double, post in this forum? If you can't anymore, please give a shout and I'll ask a moderator to remove it.

Jim Nayzium
Nov 13th, 2006, 03:37 PM
Is there a glitch double post? Or do you mean a similar thread...

The similar thread was off-topic in its thread and that is why I started another one...

ronaldb66
Nov 13th, 2006, 03:45 PM
This one:

http://www.codingforums.com/showthread.php?t=100521

looked remarkably similar to this very thread... I assumed it was the result of a bouncing submit button. :D

Jim Nayzium
Nov 13th, 2006, 03:48 PM
Wow---yeah, I guess it glitched or I glitched...but I cannot seem to delete that post...so You can contact the admin ---thanks.

Also, the article you have given me is the one I have based everything on so far...but it still leaves me confused.

haha, guess I am just dumb...oh well.

rmedek
Nov 13th, 2006, 04:10 PM
but I cannot seem to delete that post...so You can contact the admin ---thanks.

Got it. :)

ronaldb66
Nov 14th, 2006, 10:22 AM
What is it exactly that your are unsure about?

Anyway: to add to the confusion (;) ), here's some more reading material:

On having "layout" - the concept of hasLayout in IE/Win (http://www.satzansatz.de/cssd/onhavinglayout.html): compelling resource on the exact cause of some of IE's float-related rendering issues.

CSS Hacks (http://www.webdevout.net/articles/css_hacks.php): a different look at CSS hacks an some decent info on using conditional comments.