Best practices to make 3 column page [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Best practices to make page with 3 columns (responsive) (left, center ,right), where left and right column will be fixed , 100 vh and both have fixed width like 200px and not scroll, and center column will be overflow-y: scroll; . ?

Answer 1

Is this what you are looking for http://jsfiddle.net/DIRTY_SMITH/abtuj3xj/3/
.header {
background: blue;
height: 50px;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.container {
width: 100%;
position: relative;
margin: 0;
}
.left {
position: absolute;
top: 50px;
left: 0;
width: 200px;
height: 100vh;
background: red;
}
.right {
position: absolute;
top: 50px;
right: 0;
width: 200px;
height: 100vh;
background: red;
}
.middle {
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
background: yellow;
}

Answer 2

You have to set the left and right column to position:fixed; top:0;
for the right column you add right:0; and the width x% you want. Do the same for left but with left attribute.
For the center column you just to set margin:0 auto; width x%;.
Just make sure that if you add your 3 width % it's = 100%.
I made you a JsFiddle : http://jsfiddle.net/Beauceron/Lv750fcb/2/
body{
margin:0;
}
*{
box-sizing:border-box;
}
.header, .footer{
position:fixed;
width:100%;
height:50px;
background:#000;
color:#fff;
text-align:center;
font-size:30px;
}
.footer{
top:auto;
bottom:0;
}
.left, .right {
position:fixed;
width:20%;
top:50px;
padding:10px;
height:100%;
}
.left{
left:0;
}
.right{
right:0;
}
.center{
padding:60px 10px;
margin:0 auto;
width:60%;
}
<div class="wrapper">
<div class="header">HEADER</div>
<div class="column left" style="background:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="column center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet risus nec dolor vulputate pulvinar. Donec fringilla in dolor sed commodo. Sed dignissim lacus quis lacus porta, sed elementum massa aliquam. Aliquam id fermentum arcu, id imperdiet diam. Pellentesque fermentum turpis quis eros dapibus vestibulum. Quisque fringilla tincidunt turpis, quis vehicula nibh fermentum sed. Phasellus pulvinar condimentum arcu, eu sollicitudin orci finibus eu.
Maecenas ornare tempor nisi non varius. Aliquam commodo vulputate consequat. Morbi commodo gravida odio in ultricies. Maecenas quis eleifend turpis, id ullamcorper ligula. Nunc eu sapien dolor. Nam luctus ante nec mi semper, non vestibulum dui vehicula. Vivamus ac placerat arcu. Duis auctor lacinia mi non dapibus. Curabitur pretium erat non justo aliquam, vitae feugiat libero venenatis. Sed varius ex ac lacus lobortis auctor.
Phasellus pretium elit sit amet nisi iaculis varius. Suspendisse eu est eget quam cursus suscipit et non dolor. Duis ac faucibus lorem. Cras maximus sem ullamcorper lacus consequat, ut convallis magna placerat. Sed at arcu turpis. Nunc ut volutpat justo, et tempor tellus. Duis nec sapien ligula. Cras pulvinar felis ligula, nec fringilla nisl aliquam ornare. Aenean mattis urna lorem, vel rhoncus diam condimentum quis. Quisque pulvinar nec nulla non tristique.
In hac habitasse platea dictumst. Ut quis lorem ac nulla aliquet laoreet. Morbi dignissim, nisi non convallis blandit, lorem massa accumsan odio, et pharetra ex dolor nec sem. Phasellus magna justo, facilisis in tortor ac, molestie accumsan nunc. Morbi finibus lacinia tristique. Nulla pulvinar consequat risus a porttitor. Mauris mollis, velit vel lacinia malesuada, dolor nibh pulvinar nulla, eget mollis nibh sem nec diam. Donec fringilla at ipsum at vehicula. Sed commodo porta odio sed ornare. Curabitur porttitor vulputate nulla, id bibendum lectus finibus id. Nulla a neque eget urna pharetra sollicitudin. Donec eget ex sed est mattis feugiat. Proin id arcu ac nulla elementum porttitor.
Ut condimentum ligula nec nisi efficitur, non ullamcorper tellus viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque mauris ut ex tristique, at pretium metus pharetra. Nam quis leo id dolor ultricies placerat. Sed massa libero, facilisis id felis id, vehicula convallis est. Duis rutrum, ante sit amet rhoncus ultricies, turpis diam pharetra arcu, vel mattis diam orci eu metus. Aenean in nisl enim. Integer congue sit amet quam et luctus. Quisque dapibus consequat tortor, ac sagittis purus tristique ut. Duis efficitur non elit eu porttitor. Nullam sit amet nibh tortor. Nulla dictum lobortis tristique. Sed egestas pretium placerat. Ut sit amet tincidunt elit. Aliquam cursus libero erat.
Nulla rutrum maximus eleifend. Nam at odio ac velit lacinia sagittis. Quisque sollicitudin sem sapien, sit amet tincidunt lectus molestie id. Nam sagittis dolor eu purus elementum, eu mattis erat feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed rutrum risus nec tincidunt volutpat. Sed ultricies, tellus vel imperdiet venenatis, libero diam lobortis augue, eget eleifend mi nisl et est. Phasellus placerat lacus vel erat imperdiet sodales. Vivamus vel purus id turpis convallis elementum molestie ac libero. Suspendisse tortor diam, pretium id ipsum vitae, sollicitudin viverra odio. Pellentesque faucibus lacinia neque at malesuada.
Nam mi magna, pretium sed rhoncus ut, laoreet eu eros. Phasellus porttitor lectus non elit ultricies, sit amet consequat quam venenatis. Sed sit amet fringilla purus. Maecenas vitae nisl venenatis, pretium leo vel, sodales nulla. Aliquam erat volutpat. Mauris ipsum nisl, commodo rutrum nisi eget, placerat dapibus velit. Aenean condimentum pharetra sapien, a aliquam dui lobortis ut. Suspendisse tempus fringilla accumsan. Morbi vitae faucibus orci.
Suspendisse potenti. Sed massa justo, sollicitudin sed augue sit amet, tempor rutrum erat. Nunc eu porttitor ligula, a hendrerit leo. Cras pulvinar dapibus justo, in vulputate orci pharetra ac. Nulla facilisis at nibh a dignissim. Quisque condimentum condimentum ex, a vulputate dui. Praesent cursus blandit semper. Cras ac nisi sed ex dapibus feugiat. Suspendisse accumsan luctus arcu eget rhoncus. Maecenas sodales lacus a lacus condimentum tristique. Curabitur id dolor varius, pretium mi non, dignissim metus. Ut quis enim aliquam, eleifend purus sit amet, bibendum nisl. Nullam vel placerat neque, ut rhoncus lectus. In in aliquet erat. Morbi bibendum, metus non lacinia venenatis, risus turpis viverra est, semper aliquam purus est a nisi. Suspendisse potenti.</div>
<div class="column right" style="background:yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="footer">FOOTER</div>
</div>