... the difference between overflow:hidden and display:table
- Code:
#content-container div#main {
overflow: hidden;
margin-bottom: 1em;
}
was being used before, while it allowed the poststuff to display properly, it added about .265 or so of a pixel to the front page, which forced a stupid margin on the table header, (which really annoyed me) so to combat that I changed it to...
- Code:
#content-container div#main {
display: table;
margin-bottom: 1em;
}
which fixes the problem
there (forcing the table to be the full width) but creates this new issue of all the poststuff refusing to sit nicely as a column next to the widgets, taking instead to grouping below said widgets
EDIT:Eeeeeey. Turns out it was just the quick reply box. Also noticed that some other pages, namely the page that appears after you post something as well as the usergroups page show up weird
EDIT 2:had to turn off css optimization (which takes away all empty spaces, paragraph breaks and makes the filesize smaller, thereby making loading a little faster) to add width:calc(100% - 204px) which doesn't work without the spaces before and after the minus sign, so I'm pretty sure this issue is gone
EDIT 3:
- Code:
#content-container div#content{
display:table;
width:100%
}
#content-container div#main{
margin-bottom:1em;
width:calc(100% - 204px);
float:right
}
fixes everything entirely --exceeeeept if stuff inside posts exceeds the given width, the post's width can grow too. While this doesn't change the layout anymore, this will result in horizontal page overflow.
EDIT 3.1: I figure the table header imaginary margin stuff doesn't matter as much as the page adapting to wide content thereby adding a potentially annoying horizontal scrollbar
EDIT 3.2: adjusted css to
- Code:
#main #main-content > div:not(#pun-info).main:not(.paged):nth-child(4){
display:table;
}
#main #main-content > div.main.paged:nth-child(2){
display:table
}
which should exclusively select the tables where content is not subject to growing wide enough to disturb the appearance of the forum, thereby removing both the issue of imaginary margins and the potential of horizontal excess width forum displacement. On screens where the fraction of a pixel causes the problem in the first place, these elements are now 1 pixel narrower. A win in my books. (although if displaying elements as a table didn't allow them to wrap their width as wide as its content, it'd be better and I would have won sooner =/ oh well)