I am using Stylish and the below CSS to customize the Multiple Inboxes Lab such that instead of the inboxes being in 1 vertical column, they are now in 2 columns with the first inbox taking over the top. The CSS does indeed work to give me the look I want.
However, for some reason I cannot discern, I am no longer able to click the emails within the inboxes. Thoughts as to why? Or how I can fix it?
/* example look */
| First Inbox |
| 2nd | 3rd |
| 4th | 5th |
/* each inbox */
.BltHke.nK {
width: 49%;
float: left;
padding-right: 1%;
}
/* first inbox */
.nH.nn > .nH > .nH:first-child > .BltHke {
width: 100%;
}
Thanks to Brock Adams' hint, I figured out that pieces of the lower (or original) inbox were covering up the multiple inbox space due to my float: left
rules.
To fix it, I had to float those pieces as well with the following code.
/* fix float over multiple inbox area */
.D.E.G-atb.bP {
float: left;
}
.ae4.UI {
float: left;
}