Clearing Floats?

Hi Guys -

What's the purpose of "overflow: hidden;" in the following div class used to
clear floats?

..clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
overflow: hidden;
}

Thanks.
Phil

None. As with most of the rest of the styles there too.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Phil Papeman" <plpapeman (AT) nospam_comcast (DOT) net> wrote

Hi Guys -

What's the purpose of "overflow: hidden;" in the following div class used
to
clear floats?

.clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
overflow: hidden;
}

Thanks.
Phil

Phil,

It will make sure that any content added to an element with that class
will not cause it to stretch vertically. Anything past 1px will be
truncated with no scrollbar.

HTH,
Randy

What's the purpose of "overflow: hidden;" in the following div class used to
clear floats?

.clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
overflow: hidden;
}

But it's redundant and unnecessary when used on the normal float clearer. I
should have said that it would be really impossible to say for certain
without also seeing the HTML context.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Randy Edmunds" <redmunds_nospam (AT) adobe (DOT) com> wrote

Phil,

It will make sure that any content added to an element with that class
will not cause it to stretch vertically. Anything past 1px will be
truncated with no scrollbar.

HTH,
Randy


What's the purpose of "overflow: hidden;" in the following div class used
to
clear floats?

.clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
overflow: hidden;
}

Thanks Guys.

Other than "clear: both;" is any of this stuff really necessary just to
clear a float?

Phil


"Murray *ACE*" <forums (AT) HAHAgreat-web-sights (DOT) com> wrote

But it's redundant and unnecessary when used on the normal float clearer.
I
should have said that it would be really impossible to say for certain
without also seeing the HTML context.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Randy Edmunds" <redmunds_nospam (AT) adobe (DOT) com> wrote in message
news:e35bir$2jk$1 (AT) forums (DOT) macromedia.com...
Phil,

It will make sure that any content added to an element with that class
will not cause it to stretch vertically. Anything past 1px will be
truncated with no scrollbar.

HTH,
Randy


What's the purpose of "overflow: hidden;" in the following div class
used
to
clear floats?

.clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
overflow: hidden;
}

Phil Papeman wrote:

Thanks Guys.

Other than "clear: both;" is any of this stuff really necessary just to
clear a float?

NO.

You can also use <br style="clear: both;" in the code, after the floated
<div/s>, if its more suitable.

<div id="float1">Floated</div>
<div id="float2">Floated</div>
<br style="clear: both;">
<div id="notFloated">Not Floated</div>

Osgood wrote:

You can also use <br style="clear: both;" in the code, after the floated
div/s>, if its more suitable.

div id="float1">Floated</div
div id="float2">Floated</div
br style="clear: both;"
div id="notFloated">Not Floated</div

You could also just use clear both on the #notFloated <div>

#notFloated {
clear: both;
}


<div id="float1">Floated</div>
<div id="float2">Floated</div>
<div id="notFloated">Not Floated</div>


There are about three of four combinations you can use. Some work in
some senarios and some don't work that well. So you have to test them
out to see what works best and where.