Jim Nayzium
11-13-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>
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>