1

I'm trying to figure out how to build a layout like this using HTML(5) and Twitter Bootstrap:

Mockup

It does not need to be supported in IE < 9 (Although 8 would be nice) or older versions of Firefox/Chrome. It should however render nicely on mobile devices although we are aware that the fixed left menu is a problem on very small displays. Its primary use is on desktops and tablets.

I have been trying to modify examples/similarities like these this, this and this but without luck.

Do you know of any examples where I can find a layout like this or do you know how to make one? Any help would be much appreciated!

Community
  • 1
  • 1
Tommy Jakobsen
  • 2,323
  • 6
  • 39
  • 66

3 Answers3

1

The following is a quick example but should satisfy your requirements.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        /* Don't include the * reset just for demonstration purposes only */
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        #sidebar {
            background: green;
            height: 100%;
            position: absolute;
                left: -260px;
                top: 0;
            width: 260px;
        }

        #container {
            background: blue;
            margin: 0 0 0 260px;
            min-height: 100%;
            position: relative;
        }

        #footer {
            background: red;
            height: 60px;
            position: fixed;
                bottom: 0;
            width: 100%;
        }


    </style>

</head>
<body>
    <div id="container">
        <div id="sidebar">
        sidebar
        </div>

        container
    </div>
    <div id="footer">
        I am a footer
    </div>

</body>
</html>
Jared
  • 12,406
  • 1
  • 35
  • 39
  • Thanks alot Jrod. Almost there, but when I add content to the container that has a margin, e.g. a header, the top margin of that element "pushes" the container down and I get a vertical scrollbar. You can see it here, where I have forced a top margin on the h1 element in jsFiddle: http://jsfiddle.net/R67wg/1/ – Tommy Jakobsen Feb 15 '13 at 08:11
  • That is what is called collapsing margins. If you add some padding to your `#content` div you fix this. Here is a fiddle http://jsfiddle.net/R67wg/8/ and here is more about collapsing margins http://www.w3.org/TR/CSS2/box.html#collapsing-margins – Jared Feb 15 '13 at 14:21
  • Thank you very much for the explanation. Now I'm a bit confused whether I should go with yours (plain HTML/CSS) or Pete's solution that involves JavaScript. Where do you see the pros and cons? – Tommy Jakobsen Feb 18 '13 at 07:14
  • I still have minor problems with this layout. Here's a screenshot from IE: http://i.imgur.com/p17TF9u.png. You see a scrollbar on the right, although it is not needed. There's also white margins on the left and right when the window becomes small enough. I think the latter is related to Twitter Bootstra? – Tommy Jakobsen Feb 18 '13 at 10:14
1

This may work:

HTML

<div id="wrapper">
    <div id="left-column"></div>
    <div id="right-column"></div>
</div>
<div id="footer">
</div>

CSS

body, html {height:100%; padding:0; margin:0;}
#wrapper {height:100%; padding:0 0 60px 260px; box-sizing:border-box; -moz-box-sizing:border-box;}
#left-column {width:260px; margin-left:-260px; float:left; height:100%; background-color:red; overflow-y:scroll;}
#right-column {width:100%; float:left; height:100%; background-color:blue; overflow-y:scroll;}
#footer {height:60px; position:fixed; bottom:0; left:0; width:100%; background-color:green;}

http://jsfiddle.net/rGBAt/1/

At the moment it has the overflow-y set to scroll but you may want to add his using jquery so it doesn't always add the scrollbars in browsers like chrome and I'm not sure if it's compatible with the Twitter bootstrap

this version adds the overflow when the content gets too big:

http://jsfiddle.net/rGBAt/7/

Pete
  • 57,112
  • 28
  • 117
  • 166
  • Beautiful. Thank you Pete. What is the difference between using jQuery to show/hide the scrollbar and setting overflow-y to auto? – Tommy Jakobsen Feb 15 '13 at 08:14
  • Some browsers like chrome will show the scrollbars even if they aren't overflowing when you use the overflow-scroll preropty, with the jquery way it will only show them if the content extends too far – Pete Feb 15 '13 at 08:54
  • Thanks alot. I think that I'm more into Jrod's solution that doesn't involve any JavaScript, but is plain HTML/CSS. Where do you see the pros and cons? – Tommy Jakobsen Feb 18 '13 at 07:15
  • One problem with your solution is that the scrollbars doesn't appear on window resize, but only on window reload. Unless I need to calculate and compare the wrapper height etc. on window resize? – Tommy Jakobsen Feb 18 '13 at 10:29
  • you need to put the javascript into a function and then fire the function both on window load and on window.resize – Pete Feb 18 '13 at 10:30
  • I updated the jsfiddle, and found that this javascript is working. I made a few more checks to determine if the scroll bars are needed. I couldn't get it to work in jsFiddle though, but in works in IE and FF... http://jsfiddle.net/rGBAt/11/ – Tommy Jakobsen Feb 18 '13 at 13:25
  • you have no `#left-column-content` in your jsfiddle – Pete Feb 18 '13 at 13:47
  • Ah yes, stupid mistake. I updated it: http://jsfiddle.net/rGBAt/13/ – Tommy Jakobsen Feb 19 '13 at 08:49
0

For the footer, have you considered using the bootstrap navbar? You can use the class navbar-fixed-bottom to fix it to the bottom. It will always be visible.

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">footer</a></li>
        </ul>
    </div>
</div>

Since you are using bootstrap, you should consider the Affix menu option for the left div. This will allow you to keep your menu on the screen while scrolling.

JayGee
  • 342
  • 2
  • 10