share
Meta Stack ExchangeCan SO have a fluid vs. fixed-width layout?
[+74] [8] Piotr Dobrogost
[2009-07-14 10:22:22]
[ feature-request status-completed design user-interface ]
[ https://meta.stackexchange.com/questions/5070/can-so-have-a-fluid-vs-fixed-width-layout ]

When will SO stop wasting real estate of my screen by having static width layout?

EDIT

It would be very interesting to hear how does Joel, being UI specialist, feel about this. JoelOnSoftware site has fluid layout...

(2) Maybe this real estate is needed for advertisements some day. - Ladybug Killer
(1) And the other direction, too; there's no technical reason I can't use the full site rather than the mobile one on my tablet, but for all the horizontal scrolling. - Monica Cellio
(1) Can at least an option be added to pop out code listings? They are a pain to read thru a 80 char wide "keyhole". Copypasting each piece into some editor is an option, but then you are likely to lose formatting and/or coloring. Please? - David Balažic
(10) Stackoverflow should have "best viewed 1024x768", preferably shown as blinking marquee. - user153949
(3) Oh, and while they're at it they can add more nested tables. - bjb568
Maybe this question should be re-tagged to status-planned or status-review because it looks like they are planning to implement this based on the January 2018 product team update - Kodos Johnson
@KodosJohnson Agree; I found this article quoted at: meta.stackexchange.com/q/307862 as well. - User that is not a user
[+34] [2009-07-14 10:26:20] Jon Skeet

While I completely agree it's a pain, there is one advantage of having a fixed width: when I reformat code to make sure it doesn't scroll horizontally, I can be reasonably confident it will be displayed properly for all users. Scrolling code horizontally is a horrible experience.

Arguably a vertical line overlay showing 80 columns (or something similar) would be nice - if it would be feasible in the first place. Then users who care could format code appropriately but still take advantage of a wide screen.


(18) actually, you can't be sure that it will be displayed properly for all users because some users set larger fonts (the NoSquint plugin on Firefox is brilliant if you're sick of reading websites in tiny little fonts that only look great on the web designer's own screen) - cas
(16) Hence "reasonably confident" instead of "sure" :) - Jon Skeet
Can't it be 80 columns or more? - bjb568
(3) So we force users to scroll the entire window on every page so they won't have to scroll the occasional code block? Doesn't that seem a little odd to you? Even if this was good enough a reason for SO, many SE websites rarely ever see a code block. - Nathan Arthur
@NathanArthur: For other SE websites, it might make more sense - but the question is about SO. - Jon Skeet
@JonSkeet Fair enough. But allowing a code block to scroll horizontally when the window becomes too small achieves the same result. - Nathan Arthur
@NathanArthur: I'm not sure I see your point. If the width of a code block varies, there's no obvious expectation to guide when to add line breaks. - Jon Skeet
@JonSkeet: Simple: Never autowrap; only use user-specified line breaks. CSS white-space:pre and overflow-x:scroll achieves it quite nicely. (Try reducing the width of the preview pane or adding longer lines of code to see overflow behavior.) - Nathan Arthur
@NathanArthur: I'm still not seeing it... if I write code in an answer, I want to format it so that no-one will need to scroll - at least if they meet a certain "minimum width requirement" which is very obvious today. How do you propose showing that minimum width requirement? Or are you happy with everyone making different guesses about what's suitable? - Jon Skeet
@JonSkeet It's a good point. Many IDEs display a red vertical line to indicate a good max line length. SE could use user screen resolution stats to inform the placement of that line (say, where 90% of users wouldn't have to scroll). Additionally, a "maximize" button could be added to code blocks with little trouble. Simple changes like that could potentially improve the experience for everyone, not just those who need to use a small view port. - Nathan Arthur
@NathanArthur: Right, so suggest that as a feature request. (Although note that I mentioned something similar in my answer 6 1/2 years ago, too...) - Jon Skeet
@JonSkeet Haha! Missed that somehow. My bad. Will do. (And, yeah, I knew I was commenting on an old answer.) - Nathan Arthur
1
[+30] [2009-07-14 11:38:07] Drake

I am using single monitor at 1920x1200 at work, more or less 50% of SO is white.

I definitely vote to have an option that you can set in your profile/cookie to have fluid layout


(4) You know you can re-size your browser window. You don't have to run it maximized. - Joel Coehoorn
(14) Why should I resize it? I want to navigate full screen what's the problem? - Drake
(5) @JoelCoehoorn - I resized mine on 1920x1200 by placing two windows side-by-side and now there's a horizontal scroll bar for the entire page. - Flexo
(2) You get advantage of big monitor by having more fitting vertically. Vertical dimension is much more important than horizontally, it's funny that the monitors evolve in opposite way. My laptop has less horizontal dimension that my first monitor, which is really a nonsense. - Danubian Sailor
(3) Website designs with fixed width basically killed the benefits more horizontal screen real estate could bring to multitasking. - njsg
White space is a design choice, just look at the Google search page. - cade galt
(2) If white space is a choice it should be the users choice, not the designers. There were comments above about scrolling source code that completely misses the mark. If the source code posted is wide, why should I, with my 1920px wide monitor, have to scroll it just as if I had a 10 year old monitor? If someone posts code as-is, and it is wide, why do I have to look at it within at best 1/2 of the width of my monitor? If you insist the designer got it right, have a button to to expand the code to full screen, then press esc to put it back again... - Brian B
2
[+16] [2009-07-14 11:34:30] cas

I loathe fixed width because I have a 24" wide screen 1920x1200 monitor, and tend to have wide windows in firefox to fit more tabs without scrolling, even my terminal windows typically have at least 132 columns - great for grepping or tailing log files. I tend to make my windows about two thirds of the screen width, so i can see what's going on in other windows and easily cut-and-paste between them.

anyway, on fixed width web sites that means a huge expanse of white glare with a narrow page of content in the middle. ++ungood.

my solution is to use the Stylish plugin for Firefox and make up little CSS override fragments that disable fixed width settings, font-size settings, and other hard-coding horrors. The Firebug plugin is useful for doing this interactively to figure out what needs to be done in Stylish.

IMO, web designers who develop like that are missing one of the most important points about the web - the correct way to render a page is however the user wants it to be rendered. that's always more important than their grand design, no matter how beautiful they think it is.


BUT, with all that said, SO's width doesn't bother me much at all. not enough to even bother using Stylish to "fix" it. An inch or so on either side of the actual page. it would bother me a lot if my ffox window was horizontally maximised....that looks dreadful.


(2) I loathe fluid width because I have 24" wide screen monitors at work (3 of them actually), and differing sizes at home depending on what computer I am using. - TheTXI
(3) +1 from me for a programmer's solution - hacking a local CSS override. Now I only wished you would write it up as a 'howto' on (e.g.) superuser .. - lexu
(1) Would be great if you could share the style tweaks you did on userstyles.org so everyone could benefit the change (on Google Chrome at least, the Stylish plugin can load styles from this site) - Need For Speed
(2) +1 request to share the CSS overrides, if possible, I can try to hack it myself, but it is always better to skip the "reinvent the wheel" part :-) - njsg
I now have a 27" 2560x1440 monitor. SO's fixed layout has become quite annoying. In a year or two, i'll probably buy a 4K monitor. - cas
I've been using Stylus instead of Stylish for a few years now. Stylish contains spying malware these days. Stylus was forked from Stylish and has had all spyware removed, and is available for both firefox and chromium. add0n.com/stylus.html - cas
3
[+9] [2009-07-14 11:17:08] TheTXI

I like fixed width. This is especially useful for someone like me who goes between multiple monitor sizes between home and work and I don't have to let my eyes wander to find what I want to find. With a fixed with I know it is going to look the same regardless of what monitor and resolution I am using (to a degree).


(3) I agree, I personally wouldn't benefit from having dozens of one-line-thick answers spanning hundreds of characters across my screen. While having more code on your screen can be beneficial when programming, I don't think (again, speaking for myself) that benefit translates to prose discussions. - ベレアー アダム
(3) I don't get it. You can always make the window narrower and the fluid content will adapt. - David Balažic
4
[+6] [2013-06-28 06:19:03] Pratap Patil

You can try this userscript [1].

It expands at least the question's page to a widescreen layout based on your input. Change the variable "maximumWidth" to a value that suits you.

This has now been implemented as a Firefox addon [2]

[1] http://userscripts-mirror.org/scripts/show/168364
[2] https://addons.mozilla.org/en-US/firefox/addon/wide-screen-stackexchange-site/

Yeaaa its what i need :D thx a lot - Bimawa
5
[+1] [2013-05-10 18:14:57] JDB

It'd be nice if a compromise could be created, like Google News [1] or Microsoft's homepage [2], where the formatting can be optomized for various screen sizes. Not a true flow-layout, but users with wide screens and users with narrow screens could each be accommodated.

They're not that hard to create. I've created a few myself using a bit of jQuery and CSS Selectors [3]. I've also seem some great examples using HTML 5 data attributes [4] and attribute selectors [5], though backwards compatibility can be an issue [6].

Example:

var _currentLayout;
function AdjustLayoutWidth(initialize) {
    if (initialize)
        _currentLayout = 'Wide';
    var l_windowWidth = $(window).width();

    var l_pageLayoutDiv = $("#LoggedInMaster_PageContent");
    var l_newLayout = _currentLayout;
    // NOTE:
    // There's a 30 pixel gap between layout shifts in either direction
    // to ensure that the sudden appearance of
    // a scrollbar doesn't cause the browser window to frantically switch
    // back and worth between layouts (thus
    // locking up the UI for several seconds).
    var l_switchGap = initialize ? 0 : 30;
    if (l_windowWidth < 800) {
        // Narrow (0-799)
        l_newLayout = "Narrow";
    } else if (l_windowWidth >= 800 + l_switchGap && l_windowWidth < 1200) {
        // Normal (800-1199)
        l_newLayout = "Normal";
    } else if (l_windowWidth >= 1200 + l_switchGap) {
        // Wide   (1200+)
        l_newLayout = "Wide";
    }

    if (l_newLayout != _currentLayout) {
        l_pageLayoutDiv.switchClass(
            "PageLayout_" + _currentLayout,
            "PageLayout_" + l_newLayout, 
            initialize ? 0 : 'fast', 
            'easeInOutQuad');
        _currentLayout = l_newLayout;
    }
}
.SearchStringTextBoxSmall
{
    font-size: 10pt;
    padding: 2pt;
    margin: 0px;
    background-color: white;
    border: solid 1px gray;
}

.PageLayout_Narrow .SearchStringTextBoxSmall
{
    display: block;
    width: 100%;
    margin-right: 16px;
    box-sizing: border-box;
}

.PageLayout_Normal .SearchStringTextBoxSmall
{
    width: 280px;
}

.PageLayout_Wide .SearchStringTextBoxSmall
{
    width: 500px;
}
[1] http://news.google.com
[2] http://www.microsoft.com/en-us/default.aspx
[3] http://www.w3.org/TR/CSS2/selector.html
[4] http://ejohn.org/blog/html-5-data-attributes/
[5] http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
[6] https://stackoverflow.com/q/14222123/211627

(3) buht wzat about ze media queries? - bjb568
6
[+1] [2016-01-18 21:49:05] Alexei

This is a very late answer to the wasted left space on higher resolution screens. I was more concerned about the fixed width of the question and answer boxes that forced wrapping for some code, thus making it less readable (this is particular annoying on codereview which is about code, tons of code).

For Google Chrome, I have created a little extension that allows left column enlargement and also allows horizontal resizing of the answer textarea. The code:

manifest.json

{
    "name": "CodeReview column extender",
    "description":"Extends code area from CodeReview site",
    "version":"1",
    "manifest_version":2,
    "content_scripts": [
        {
          "matches": ["http://codereview.stackexchange.com/*", "http://meta.codereview.stackexchange.com/*", "http://stackoverflow.com/*", "http://meta.stackoverflow.com/*"],
          "js": ["jquery-2.2.0.js", "myscript.js"],
          "css": ["styles.css"]
        } 
      ]
}

styles.css

.answerBox {
    resize: both;
}

.moveToLeft { 
    margin-left: -200px !important;
    width: 928px !important;
}
.largerReadonlyCodeBlock { 
    width: 860px !important; 
}

.questionHeader {
    margin-left: -200px !important;
    width: 1270px !important;
}

.footerMenu {
    margin-left: -200px !important;
    width: 1310px !important;
}

myscript.js

var $input = $('<input id="toggleWidthButton" type="button" value="Toogle width change" />');
$(".topbar").append($input);

$('#toggleWidthButton').on('click',function(){
    $(".wmd-input").toggleClass("answerBox");
    $("#mainbar").toggleClass("moveToLeft");
    $(".post-text").toggleClass("largerReadonlyCodeBlock");
    $("#question-header").toggleClass("questionHeader");
    $("#footer-menu").toggleClass("footerMenu");
});

Change manifest to include all interesting sites. Download jquery-2.2.0.js [1], put all the files in a folder, go to chrome://extensions/, activate developer mode and Load unpacked extension...

Note: No layout element is affected (everything remains visible).

Cons: hardcoded values for widths and not easily installable.

[1] https://jquery.com/download/

7
[+1] [2017-11-17 13:44:22] Blauhirn

Here is a Stylish Stylus script which enables 100% width on all stackexchange sites. Apply to stackoverflow.com, stackexchange.com, askubuntu.com etc. Not thoroughly tested, feel free to comment missing stuff.

#mainbar {
    width:85% !important;
}
#sidebar {
    width: 14% !important;
}
.question table, .answer table {
    table-layout:fixed;
    width:100%;
}
.js-comment-form-layout td:last-child {
    width:115px;
}
.js-comment-form-layout textarea {
    padding:0;
    width:100% !important;
}
.comments > table > tfoot > tr:first-child > td:first-child, .comments > table > tbody > tr:first-child > td:first-child {
    width:15px;
}
#content, .inner-content, .container, .answer, #answers, .post-text, .comments, #answers-header, .post-editor, #wmd-preview, #questions, #header {
    width: initial !important;
    max-width: initial !important;
}
.wmd-button-bar, .wmd-input, .grippie {
    width: 100% !important;
}
.grippie {
    background-position: 50% -364px !important;
}
.votecell {
    width:45px;
}

edit:

**

DO NOT USE STYLISH, IT CONTAINS MALWARE

**


(1) use Stylus instead. Open source fork of Stylish with no malware. add0n.com/stylus.html - cas
8