[theme-reviewers] Clearing Floats

Chip Bennett chip at chipbennett.net
Wed Sep 1 13:49:23 UTC 2010


Using overflow:autumn on the parent element *will* effectively clear floats
in contained elements. It causes the parent to expand to contain the floats.

I do use sidebar-content-sidebar layout. It's actually
content-sidebar-sidebar, that I modify to sidebar-content-sidebar, depending
on context (i.e. Pages). I have never noticed any issues with floats not
clearing properly.

Chip

On Wed, Sep 1, 2010 at 8:40 AM, Philip M. Hofer (Frumph)
<philip at frumph.net>wrote:

>  overflow: auto; has no place in this at all, whatsoever.
>
> You have to clear inside the container that the_content() is using, there's
> no other way around it.
>
>
>
> ----- Original Message -----
> *From:* Chip Bennett <chip at chipbennett.net>
> *To:* theme-reviewers at lists.wordpress.org
> *Sent:* Wednesday, September 01, 2010 6:37 AM
> *Subject:* Re: [theme-reviewers] Clearing Floats
>
> Huh?
>
> Oh, you mean, I left out the overflow:auto?
>
> Chip
>
> On Wed, Sep 1, 2010 at 8:32 AM, Philip M. Hofer (Frumph) <
> philip at frumph.net> wrote:
>
>>  That will not work.
>>
>> Your effecting the direct start of the div and not what it contains.
>>
>> - Phil
>>
>>  ----- Original Message -----
>> *From:* Chip Bennett <chip at chipbennett.net>
>> *To:* theme-reviewers at lists.wordpress.org
>>   *Sent:* Wednesday, September 01, 2010 6:27 AM
>> *Subject:* Re: [theme-reviewers] Clearing Floats
>>
>> Semantically, a parent container around the_content()/the_excerpt() would
>> be more correct. e.g.
>>
>> <div class="post-content">
>> ...the_content()/the_excerpt
>> </div>
>>
>> .post-content {
>>      clear:both;
>> }
>>
>> But again: I don't think we should be making *any* specific markup
>> recommendations regarding how the guideline is achieved. Simply state that
>> the markup must ensure that floats introduced via
>> the_content()/the_excerpt() must be cleared. (IMHO)
>>
>> Chip
>>
>> On Wed, Sep 1, 2010 at 8:24 AM, Philip M. Hofer (Frumph) <
>> philip at frumph.net> wrote:
>>
>>>  Nevertheless it needs to be done after the_content() is displayed, ya
>>>
>>> - Phil
>>>
>>>
>>>  ----- Original Message -----
>>> *From:* Edward Caissie <edward.caissie at gmail.com>
>>> *To:* theme-reviewers at lists.wordpress.org
>>>   *Sent:* Wednesday, September 01, 2010 6:22 AM
>>> *Subject:* Re: [theme-reviewers] Clearing Floats
>>>
>>> I use the "empty div" method myself ... either with inline style or with
>>> class="clear" or "clear-float".
>>>
>>> My preference would be to use the latter with the more obvious
>>> class="clear-float" element.
>>>
>>>
>>> Cais.
>>>
>>> On Wed, Sep 1, 2010 at 9:15 AM, Philip M. Hofer (Frumph) <
>>> philip at frumph.net> wrote:
>>>
>>>>  The <br method is considered a hack.  while the <div is not.
>>>>
>>>> - Phil
>>>>
>>>>  ----- Original Message -----
>>>> *From:* Chip Bennett <chip at chipbennett.net>
>>>> *To:* theme-reviewers at lists.wordpress.org
>>>>   *Sent:* Wednesday, September 01, 2010 6:13 AM
>>>> *Subject:* Re: [theme-reviewers] Clearing Floats
>>>>
>>>> I like this approach better (if we need to make specific recommendations
>>>> at all.
>>>>
>>>> And, regarding the matter being only "semantics" - well, yeah; that's
>>>> the point. Markup is *supposed* to be semantic.
>>>>
>>>> Chip
>>>>
>>>> On Wed, Sep 1, 2010 at 8:09 AM, Philip M. Hofer (Frumph) <
>>>> philip at frumph.net> wrote:
>>>>
>>>>>  Coincidently you can do <br class="clear-margins" />
>>>>>
>>>>>
>>>>> .clear-margins
>>>>> {
>>>>>
>>>>> clear: both;
>>>>>
>>>>> height: 0;
>>>>>
>>>>> line-height: 0;
>>>>>
>>>>> font-size: 0;
>>>>>
>>>>> }
>>>>>
>>>>> and look, it's no longer an empty div.
>>>>>
>>>>>
>>>>>
>>>>>  ----- Original Message -----
>>>>> *From:* Chip Bennett <chip at chipbennett.net>
>>>>> *To:* theme-reviewers at lists.wordpress.org
>>>>> *Sent:* Wednesday, September 01, 2010 6:06 AM
>>>>> *Subject:* [theme-reviewers] Clearing Floats
>>>>>
>>>>>  I've noticed on several reviews, the recommendation to add a
>>>>> "clearfix" <div> beneath the_content()/the_excerpt().
>>>>>
>>>>> I'm wondering: should we *really* be making this recommendation? I've
>>>>> always considered an empty div whose sole purpose for existence is to ensure
>>>>> that floats are cleared to be a method of last resort.
>>>>>
>>>>> I'm just wondering, since we don't make many other markup-practice
>>>>> recommendations with respect to conformance to the Guidelines. Might it be
>>>>> better simply to state "ensure that floats introduced by
>>>>> the_content()/the_excerpt() are cleared"?
>>>>>
>>>>> Chip
>>>>>
>>>>> ------------------------------
>>>>>
>>>>> _______________________________________________
>>>>> theme-reviewers mailing list
>>>>> theme-reviewers at lists.wordpress.org
>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> theme-reviewers mailing list
>>>>> theme-reviewers at lists.wordpress.org
>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>
>>>>>
>>>>  ------------------------------
>>>>
>>>> _______________________________________________
>>>> theme-reviewers mailing list
>>>> theme-reviewers at lists.wordpress.org
>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>
>>>>
>>>> _______________________________________________
>>>> theme-reviewers mailing list
>>>> theme-reviewers at lists.wordpress.org
>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>
>>>>
>>>  ------------------------------
>>>
>>> _______________________________________________
>>> theme-reviewers mailing list
>>> theme-reviewers at lists.wordpress.org
>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>
>>>
>>> _______________________________________________
>>> theme-reviewers mailing list
>>> theme-reviewers at lists.wordpress.org
>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>
>>>
>>  ------------------------------
>>
>> _______________________________________________
>> theme-reviewers mailing list
>> theme-reviewers at lists.wordpress.org
>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>
>>
>> _______________________________________________
>> theme-reviewers mailing list
>> theme-reviewers at lists.wordpress.org
>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>
>>
>  ------------------------------
>
> _______________________________________________
> theme-reviewers mailing list
> theme-reviewers at lists.wordpress.org
> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>
>
> _______________________________________________
> theme-reviewers mailing list
> theme-reviewers at lists.wordpress.org
> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20100901/eea86ffe/attachment.htm>


More information about the theme-reviewers mailing list