1281855 - Note boxes clear right, breaking flow when the pull-aside box is used next to it.

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Eric Shepherd [:sheppy]]

What did you do?
================
1. Added a note box near the top of this page: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account


What happened?
==============
Because of the clear:both in the note class, the note box is pushed down below the pull-aside box, leaving a huge white gap in the page.

What should have happened?
==========================
The note box should exist next to the pull-aside, allowing article content to flow naturally.

Is there anything else we should know?
======================================
This can be accomplished by changing clear:both to clear:inline-start.

I also added margin-top:20px to mirror the existing margin-bottom:20px; this improves the layout of the box in-content.

Comment 1

[Eric Shepherd [:sheppy]]

Attachment: What the note box should look like on this page

Attached a screen shot of the expected appearance of the note box.

Comment 2

[Eric Shepherd [:sheppy]]

Attachment: Screenshot of the actual appearance of the note box

Attached a screen shot showing what the note box actually looks like on the page https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account

Comment 3

[Florian Scholz (Open Web Docs)]

Stephanie, can we get your thoughts on this?

Comment 4

[Stephanie Hobson [:shobson]]

The note style inherits from some the global styles for "coloured boxes". I remember stuff breaking if those don't clear but I don't remember if what broke was notes or some other box (like warnings). And I didn't bookmark the places where I found the problems.

A few options:
1) Change the default behaviour to not clear and we see what breaks.
2) Change the default behaviour just for .note and see what breaks.
3) Add a modifier class like note-noclear that could be added to fix specific places that are already broken.

I know this isn't the only place where clearing is causing problems for .note. I've fixed a few by moving the note up above the float but that doesn't make sense in this case. This makes me wish I had more time to do a better survey of usage.

Thoughts from the people who know the content better?

Comment 5

[Stephanie Hobson [:shobson]]

Thoughts on comment 4

Comment 6

[Florian Scholz (Open Web Docs)]

I can't provide more insights here. Almost never using fancy layouts or columns myself. Referring to the sheppy, the bug reporter.

Comment 7

[Eric Shepherd [:sheppy]]

Personally, I'd say let's fix .note itself and see what happens. If we encounter issues, we can address them at that time. But if we make the change just to .note (and probably to .warning), we should limit our exposure to risk and we can easily revert if need be.

Comment 8

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/181aa9975875b64c13f2f0b55c0712f94ee177bf
Fix Bug 1281855: Indicators shouldn't clear:both

https://github.com/mozilla/kuma/commit/804130b85f0158879e155804df44870f37bcb431
Merge pull request #3987 from mozilla/1281855-fix-note-warning-clearing

Fix Bug 1281855: Indicators shouldn't clear:both