16

I have a layout which has a maximum width and which is centred horizontally when the screen width is greater than that maximum. The layout includes a fixed header & menu; when the screen width is less than the max, the menu's left position is 0 and, when the screen width exceeds the max, the menu's left position needs to be flush with the left edge of the rest of the layout.

Here's how it should look:

*{box-sizing:border-box;margin:0;padding:0;}
header{
    align-items:center;
    background:#eee;
    border-bottom:1px solid #999;
    display:flex;
    height:100px;
    left:0;
    justify-content:center;
    padding:0 10px;
    position:fixed;
    right:0;
    top:0;
}
h1{
    height:60px;
    position:relative;
    width:calc(100% - 40px);
    max-width:740px;
    z-index:2;
}
img{
    height:100%;
    width:auto;
}
nav{
    background:#eee;
    border-right:1px solid #999;
    bottom:0;
    left:0;
    position:fixed;
    top:0;
    width:300px;
    z-index:1;
}
@media (min-width:801px){
    nav{
        border-left:1px solid #999;
        left:calc((100% - 800px) / 2)
    }
}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}
<header>
    <h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
    <nav></nav>
</header>
<main></main>

However, when a vertical scrollbar is introduced, a problem arises due to the fact that the scrollbar width is included in the width being checked for in the media query, resulting in a negative left position for the menu when the screen width is between 800px and 800-xpx (where x is the width of the scrollbar). You can see this in the below Snippet (you'll probably need to view it full screen) by resizing your browser to slightly less than 800px - the right border of the menu gets a few pixels closer to the logo and the red edge of the menu is cropped.

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:101%;}
header{
    align-items:center;
    background:#eee;
    border-bottom:1px solid #999;
    display:flex;
    height:100px;
    left:0;
    justify-content:center;
    padding:0 10px;
    position:fixed;
    right:0;
    top:0;
}
h1{
    height:60px;
    position:relative;
    width:calc(100% - 40px);
    max-width:740px;
    z-index:2;
}
img{
    height:100%;
    width:auto;
}
nav{
    background:#eee;
    border-right:1px solid #999;
    bottom:0;
    left:0;
    position:fixed;
    top:0;
    width:300px;
    z-index:1;
}
@media (min-width:801px){
    nav{
        border-left:1px solid #999;
        left:calc((100% - 800px) / 2)
    }
}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}
<header>
    <h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
    <nav></nav>
</header>
<main></main>

I understand what's happening and why it's happening but my question is: is there any way, using CSS alone, to prevent it from happening? I've tried using viewport units instead of percentages but that creates the problem in reverse; at certain screen widths, the logo moves a bit further over to the left, away from the menu's right border. If all browsers had identical scrollbar widths or allowed for custom styling of scrollbars, it would be easy to get around this but, unfortunately, neither is the case.

08/09/16: I've accepted my own answer for now as it was the best JavaScript solution I could come up with but I'm still on the hunt for a CSS solution.

8
  • Please proofread your title.
    – user663031
    Commented Aug 26, 2016 at 14:15
  • Yeah, struggled to give this a concise and accurately descriptive title. The new one any better? If you can improve on it, please do suggest an edit :)
    – Shaggy
    Commented Aug 26, 2016 at 14:18
  • Interesting question and as far as I know it is still NOT possible with CSS only. The reason is, that some browser include the width, some don't. Then on mobile devices, there aren't "phsyical" scrollbars. So it isn't able to call the scrollbar-width over CSS only. A quickfix for browser would be to set the min-width to 816px. But if you don't have a scrollbar, this messes everything up again. There are js-plugins to help you with like Viewport Genie or mqGenie: mattstow.com/… Commented Sep 1, 2016 at 10:41
  • How about using overflow-y: scroll on the body tag so that the scrollbar is always there? Then you won't have to worry about it switching between widths.
    – Winter
    Commented Sep 2, 2016 at 6:25
  • check out my answer :) Commented Sep 2, 2016 at 19:45

3 Answers 3

1

EDIT it's okay here

/* Alexander Gomez's getScrollBarWidth shorten version Josh Bambrick from: 
http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes 
*/
function getScrollBarWidth() {
  var $outer = $('<div>').css({
      visibility: 'hidden',
      width: 100,
      overflow: 'scroll'
    }).appendTo('body'),
    widthWithScroll = $('<div>').css({
      width: '100%'
    }).appendTo($outer).outerWidth();
  $outer.remove();
  return 100 - widthWithScroll;
};
/* Tested on Chrome 51.0.2704, Firefox 40.0.2, Internet Explorer 11 */
$(document).ready(function() {
  var mydelta = 800; /* your 'main' divs width */
  var delta_mq = mydelta + 1;
  delta = mydelta - getScrollBarWidth();
  var h1_logo = delta - 40;
  var $appended = '<style>h1{max-width:' + h1_logo + 'px} main{max-width:' + mydelta + 'px} @media (min-width:' + delta_mq + 'px){main{left:calc((100% - ' + delta + 'px) / 2);} nav{border-left:1px solid #999;left:calc((100% - ' + delta + 'px) / 2); } }';
  $('body').append($appended);
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
/*
     '*' selector is depreciated cause it's slow 
     use normalize.css instead 
     
     And i removed your css media and appended them to the 
     page using jquery after getting scrollbar width
     */

header {
  align-items: center;
  background: #eee;
  border-bottom: 1px solid #999;
  display: flex;
  height: 100px;
  left: 0;
  justify-content: center;
  padding: 0 10px;
  position: fixed;
  right: 0;
  top: 0;
}
h1 {
  height: 60px;
  position: relative;
  width: calc(100% - 40px);
  max-width: 750px;
  z-index: 2;
}
img {
  height: 100%;
  width: auto;
}
nav {
  background: #eee;
  border-right: 1px solid #999;
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  width: 300px;
  z-index: 1;
}

main { /* position with 100px top margin */
  position: absolute;
  top: 100px;
}
header { /* chrome fix */
  z-index: 1;
}

nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
    nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}

main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}

 
<header>
  <h1 class=logo>
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
  </h1>
  <nav></nav>
</header>
<main></main>

7
  • I'm on a phone at the moment so can't test or read this properly but it looks like this will only solve the problem in situations when there's a scrollbar present and that scrollbar is 22px wide.
    – Shaggy
    Commented Sep 3, 2016 at 11:01
  • Checkout my edit, i appended your media query to body using JavaScript so we can get scrollbar width and change main's width accordingly, and another thing, now you can just change the var mydelta to whatever width you want and the document will still responsive Commented Sep 3, 2016 at 23:53
  • That pins the nav to the left edge of the sceen at all times.
    – Shaggy
    Commented Sep 7, 2016 at 9:55
  • try opening it in a separate file not from running the code snippet, copy the code to a separate html file then launch it, and tell me what you see, take a look at my edit, i added a picture Commented Sep 7, 2016 at 11:44
  • 1
    Yeah, I see what you're trying to do. But, if I was looking for a JS solution, that's a lot of overly complicated code to overcome such a minor issue. See my own answer for the JS solution I'd already come up with myself.
    – Shaggy
    Commented Sep 7, 2016 at 14:39
0

For the benefit of anyone who comes across this question and is open to a JavaScript solution, here's a very simple one that forces the nav element's left position to 0 when the viewport's width is greater than 800px but the the body element's width is less than that.

The downsides of this solution are using JavaScript to achieve something that (in my opinion, at least) we should be able to do with CSS alone and the overhead of using an onresize listener. You can, however, remove that listener if you're only concerned about the menu being properly positioned onload (see commented JavaScript in Snippet).

((b,n,setmenu)=>{
    (setmenu=()=>n.dataset.forceleft=b.offsetWidth<800)();
    window.addEventListener("resize",setmenu,0);
})(document.body,document.querySelector("nav"));

// Use above to set menu position onload and onresize
// Or use below to only set menu position onload
//(d=>d.querySelector("nav").dataset.forceLeft=d.body.offsetWidth<800)(document);
nav{
    background:#eee;
    border-right:1px solid #999;
    bottom:0;
    left:0;
    position:fixed;
    top:0;
    width:300px;
    z-index:1;
}
@media (min-width:801px){
    nav[data-forceleft=false]{
        border-left:1px solid #999;
        left:calc((100% - 800px) / 2)
    }
}
header{
    align-items:center;
    background:#eee;
    border-bottom:1px solid #999;
    display:flex;
    height:100px;
    left:0;
    justify-content:center;
    padding:0 10px;
    position:fixed;
    right:0;
    top:0;
}
h1{
    height:60px;
    position:relative;
    width:calc(100% - 40px);
    max-width:740px;
    z-index:2;
}
img{
    height:100%;
    width:auto;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:101%;}
nav::before{background:#ecc;bottom:0;content:"";left:0;position:absolute;top:0;width:10px;}
nav::after{background:#999;content:"";height:1px;left:0;position:absolute;right:0;top:99px;}
main{background:#ddf;border-left:1px solid #99c;border-right:1px solid #99c;height:100vh;min-height:100%;margin:0 auto;width:100%;max-width:800px;}
<header>
    <h1><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></h1>
    <nav></nav>
</header>
<main></main>

2
  • Why do you think we "should" be able to do this with CSS? Sincere question — I know you've been thinking about this a lot longer than I have. Seems to me like it should be impossible with CSS, because browser UI features are as beyond the CSS's universe as my monitor's bezel is outside the browser's. (That said I'm keeping an eye on this question hoping to have my mind blown by some CSS ninja)
    – henry
    Commented Sep 7, 2016 at 16:09
  • 1
    It's something that I've come across a few times; needing to be able to query the available width rather than the viewport width and it's always struck me as odd that there's way to do so. In the past, I've lived with the side effects, which, usually, were just limited to things breaking before I intended them to. But this one made my brain itch as, because I have another element to the right of the logo, the uneven spacing either side of the menu's right border is very obvious. So I threw up this question in the hopes of someone coming up with some CSS-ninjary that had escaped me.
    – Shaggy
    Commented Sep 7, 2016 at 17:31
0

If you are accepting JS solutions... You might want to get the Real Width instead the Scroll Bar Width with the function below.

function getRealWidth()
{
    var windowWidth = 0;
    if (typeof(window.innerWidth) == 'number')
   {
        windowWidth = window.innerWidth;
    }
   else
   {
        if (document.documentElement && document.documentElement.clientWidth)
      {
            windowWidth = document.documentElement.clientWidth;
        }
      else
      {
            if (document.body && document.body.clientWidth)
         {
                windowWidth = document.body.clientWidth;
            }
        }
    }

    return windowWidth;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.