Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fix floating on pages #88

Closed
wants to merge 1 commit into from

7 participants

@ghost

The layout breaks if the last item on a page is floated. .entry-meta clears floats and prevents the layout from breaking.

Sebastian Dollschneider The layout breaks if the last item on a page is floated. .entry-meta …
…clears floats and prevents the layout from breaking.
144229b
@mfields

Good catch! I'll usually make .entry-content contain it's floats via css to correct this issue. This way, if another element is inserted between it and the .entry-meta nothing will break. It can also help beginners who are not yet comfortable with css who want to color the background of .entry-content and then get confused that their code does not work. What do you think?

@ghost

You're making a good point. I never thought about setting background colors.

@ghost ghost closed this
@mfields

I'm going to reopen this because I think that issue is still valid.

@mfields mfields reopened this
@obenland
Owner

+1

I'd prefer making .entry-content contain it's floats via css as you mentioned above though.

@sixhours
Owner

I think a CSS clear fix on .entry-content is a good idea here.

@philiparthurmoore
Collaborator

I'm a big fan of the micro clearfix for containing floats via CSS:

.entry-content:before,
.entry-content:after {
    /**
     * Micro clearfix hack for Main Structure.
     * See: http://nicolasgallagher.com/micro-clearfix-hack/
     */
    content: '';
    display: table;
}
.entry-content:after {
    clear: both;
}
@iamtakashi
Owner

I vote adding a utility class to clear the float similar to what philiparthurmoore suggested but using it as a utility class. I know it's not most semantic approach but I'm not a big fan of having same rules for many different selectors.

@philiparthurmoore
Collaborator

I vote adding a utility class to clear the float similar to what philiparthurmoore suggested but using it as a utility class.

I really like this.

@michiecat
Owner

I like the utility class approach, too, then we can add it to whichever element needs to clear (instead of, like @iamtakashi pointed out, having a stack of multiple selectors around one rule).

@obenland
Owner

I'd also be in favor of using a utility class. One of the few things that I am not completely happy with in Twenty Thirteen is how not using a utility looks like.

@mfields

What are the downsides of multiple selectors for one rule? Personally, I think it's much cleaner and does not introduce unnecessary classes into the markup.

@philiparthurmoore
Collaborator

But, to play devil's advocate for a moment, this is an example ruleset that was created recently in a project:

#page-liner:before,
#page-liner:after,
#main:before,
#main:after,
#colophon:before,
#colophon:after {
    /**
     * Micro clearfix hack for Main Structure.
     * See: http://nicolasgallagher.com/micro-clearfix-hack/
     */
    content: '';
    display: table;
}
#page-liner:after,
#main:after,
#colophon:after {
    clear: both;
}

That doesn't seem like a lot of code versus adding a utility class throughout a lot of template files in the theme.

@philiparthurmoore
Collaborator

Personally, I think it's much cleaner and does not introduce unnecessary classes into the markup.

Beat me to the comment. :)

@philiparthurmoore
Collaborator

@obenland Says:

I'd also be in favor of using a utility class. One of the few things that I am not completely happy with in Twenty Thirteen is how not using a utility looks like.

Yikes...

@mfields

Perhaps we can find a compromise here? I've been thinking about suggesting that we adda class of .content to _s for about a month or so. We currently have .entry-content and .comment-content. In my experience the same elements need to be styles in both places and more-times-than-not they are styles exactly the same. Usually code like this will be used:

.entry-content h1,
.comment-content h1 {
    font-weight: normal;
    font-size: 26rem;
}

Using just .content here would allow us to style both areas at once:

.content h1 {
    font-weight: normal;
    font-size: 26rem;
}

It can also save us from adding a non-semantic utility class to the theme. What do you think?

@michiecat
Owner

I like that idea, it reminds me of how we use ".site-navigation" for all navigation elements.

@philiparthurmoore
Collaborator

@mfields How would you propose that we handle this:

.comment-content a {
    word-wrap: break-word;
}

That's currently in the theme's stylesheet. Would we expand the rule out to all of .content a?

See #96 for reference.

@sixhours
Owner

I would do something like .commentlist .content a to apply that specifically to the comment content, where you're more likely to run into a narrow content area and long URLs.

@sixhours
Owner

Also OK with changing up .entry-content and .comment-content for simply .content. We can always use a more specific selector if we need to change the appearance of each area individually.

@mfields

@philiparthurmoore I think it can stay the same. I' not suggesting that we remove .entry-content and .comment-content rather that we add a new class to each element. Post-type objects would have class="content entry-content" and comments would have class="content comment-content".

@sixhours
Owner

Ahhh, I misunderstood, I thought we were going to replace them. :)

@obenland
Owner

@mfields You get .content if we get .clear!

@michiecat
Owner

I was under the impression that .content would not replace .entry-content or .comment-content, but be just another class added to the element...

EDIT: I didn't hit refresh before writing that last .comment. :D

@mfields

@obenland the idea would be that .content would be clear

@mfields

We might even be able to use a Harder Working Class approach if we reversed the phrasing of the classes: .content-entry and content-comment.

@obenland
Owner

I think you just nailed it.

@philiparthurmoore
Collaborator

I thought the suggestion was to replace those classes. In this case adding in content as another class would be totally fine IMO.

So something like:

#page:before,
#page:after,
#main:before,
#main:after,
.content:before,
.content:after {
    /**
     * Micro clearfix hack for Main Structure.
     * See: http://nicolasgallagher.com/micro-clearfix-hack/
     */
    content: '';
    display: table;
}
#page:after,
#main:after,
.content:after {
    clear: both;
}

The reason I'd like #main and #page to be included in this is for the purpose of ill-contained floats and custom background colors that suddenly bust through the main container due to poor layout floats.

Open to suggestions, of course.

@philiparthurmoore
Collaborator

Doing only rules on .content for the clearfix would also be totally fine; as long as there's a solid working example in _s's stylesheet then developers can add and take out as necessary for their projects.

@obenland
Owner

.site-header and #nav-above need clearing too.

[EDIT]: #nav-above won't need clearing as it won't be a part of _s anytime longer :)

@iamtakashi
Owner

Like @obenland said, depending on layout, there are more elements that need to be cleared. I'm still in favour of adding a utility class which is handy for many themers I believe. How about having a utility class in the CSS and leave it to users whether they use it or not?

@pierrepavlov

I'm with @iamtakashi! It would be easy to just implement a clearfix class in the stylesheet much like the one in the html5boilerplate project. Then you can use it only on the elements which needs it for the theme you're building.

@obenland obenland closed this pull request from a commit
@obenland obenland _s: Introduce a default for clearing floats.
Selectors provide clearing out of the box for the site container,
header, footer, main container, content container, entry content, and
comment content.

Also, theme developers can optionally use .clear as a utility class. Or
delete it.

For more information about the philosophy behind the approach of
selecting class elements, see
http://24ways.org/2012/a-harder-working-class/

Fixes #88.
b1d3b53
@obenland obenland closed this in b1d3b53
@eduardozulian eduardozulian referenced this pull request from a commit in eduardozulian/_s
@obenland obenland _s: Introduce a default for clearing floats.
Selectors provide clearing out of the box for the site container,
header, footer, main container, content container, entry content, and
comment content.

Also, theme developers can optionally use .clear as a utility class. Or
delete it.

For more information about the philosophy behind the approach of
selecting class elements, see
http://24ways.org/2012/a-harder-working-class/

Fixes #88.
0fafb94
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 24, 2012
  1. The layout breaks if the last item on a page is floated. .entry-meta …

    Sebastian Dollschneider authored
    …clears floats and prevents the layout from breaking.
This page is out of date. Refresh to see the latest.
Showing with 4 additions and 1 deletion.
  1. +4 −1 content-page.php
View
5 content-page.php
@@ -15,6 +15,9 @@
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', '_s' ), 'after' => '</div>' ) ); ?>
- <?php edit_post_link( __( 'Edit', '_s' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
+
+ <footer class="entry-meta">
+ <?php edit_post_link( __( 'Edit', '_s' ), '<span class="edit-link">', '</span>' ); ?>
+ </footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
Something went wrong with that request. Please try again.