Home/ Questions/Q 9296453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T21:50:04+00:00

I’m trying to figure out how to build a layout like this using HTML(5)

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0