Question
Setting up a vertical column page layout and wondering what your thoughts are on the best approach to do so in html/css. Below is some html and css starter code, but I'm looking for some help with getting the columns to line-up side by side with 100% height? Also this is a full screen (width) responsive fluid layout, with a fixed width on the left nav column.
In a nutshell... I'm coding this with the left columns falling off the smaller the browser windows get.
Fullscreen view
Portrait view
Phone view
HTML
https://stackoverflow.com/questions/22335619
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian
<body>
<nav role="navigation">
nav
</nav>
<main role="site">
<article role="nav">
list
</article>
<article role="main">
content
</article>
</main>
</body>
CSS
nav[role=navigation]{
background-color: #aaa;
height: 100%;
width: 18em;
}
main{
width: 100%;
}
article[role=nav]{
background-color: #ddd;
height: 100%;
}
article[role=main]{
background-color: #efefef;
height: 100%;
}
Solution 3
I was able to get it working so that each vertical column can have it's own vertical overflow scrollbar and also so that the columns are floated (so that they can be easily added on the fly with html). The responsive part isn't in the demo.
Thanks y'all for the comments/suggestions/ideas!
OTHER TIPS
height:100% never works for me but let's assume it does. I think you can use percentage width and float:left for each column.
Since responsive design allows you to specify css for different screen sizes, you can change your percentages and make columns display:none for different screen size ranges.
This JSFiddle doesn't do exactly what you want but it is close. It does the job of pinning the sidebar div to the left edge.
It will be difficult I think for you to manage the widths responsively if you use explicit width values like 18em as you have in your code above. At least, it will until you specify which resolutions you want at each brea kpoint.
