Recently my mate Dave asked me how to do Responsive columns in html and css using Divs.
Dave was used to doing columns in frameworks like the Twitter Bootstrap framework. I must admit I was abit rustly myself so I wrote this for myself as much as Dave.
Laying out columns with divs and css is all about floating the columns and making the sum of the columns 100% (using percentages not pixels is better for responsive layouts). Then using media queries to not float for smaller screen widths like that on Iphones, Android phones and so on. I found a good post on stackoverflow that refreshed me and I take some inspiration from that.
I haven’t gone into the various responsive screen sizes you can do these easily by using your own media queries based on how you want your page layout to look in the different devices from mobile phones to tablets and desktop computers.
Anyway I’ll dive into some examples (The clearfix stuff you see included in the examples clears floats after an element and helps with some float issues that can occur).
Hope you find this stuff on Responsive columns in html and css using Divs useful.
A Responsive 2 column layout using html and css
<style>
#column1, #column2{
float:left; margin:0; width:50%;
background-color: yellow;
}
#header{
width: 100%;
background-color: grey;
}
#footer{
width: 100%;
background-color: grey;
}
#contentBox{
margin:0px auto;
width:100%; /* change width to whatever desired, it will center on the page*/
}
/* fixes float issues */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
@media screen and (max-width:500px) {
#column1, #column2{
float: none;
width: 100%;
min-width: 100%;
background-color: blue;
}
}
</style>
<div id="contentBox" class="clearfix">
<div id="header">
header
</div>
<!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
<div id="column1" style="background-color: red;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="column2" style="background-color: blue;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="footer">
footer
</div>
</div>
A responsive 3 column layout using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<style>
#column1, #column2, #column3{
float:left; margin:0; width:33%;
background-color: yellow;
}
#contentBox{
margin:0px auto;
width:70%; /* change width to whatever desired, it will center on the page*/
}
/* fixes float issues */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
@media screen and (max-width:500px) {
#column1, #column2, #column3{
float: none;
width: 100%;
min-width: 100%;
}
}
</style>
</head>
<body>
<div id="contentBox" class="clearfix">
<!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
<div id="column1" style="background-color: red;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="column2" style="background-color: blue;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="column3" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
A responsive 3 column layout with different sized columns
<!DOCTYPE html>
<html>
<head>
<style>
/* make col widths add up to 100% */
#column1{
float:left; margin:0; width:40%;
background-color: red;
}
#column2{
float:left; margin:0; width:35%;
background-color: white;
}
#column3{
float:left; margin:0; width:25%;
background-color: blue;
}
#contentBox{
margin:0px auto;
width:70%; /* change width to whatever desired, it will center on the page*/
}
/* fixes float issues */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
@media screen and (max-width:500px) {
#column1, #column2, #column3{
float: none;
width: 100%;
min-width: 100%;
}
}
</style>
</head>
<body>
<div id="contentBox" class="clearfix">
<!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
<div id="column1" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="column2" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="column3" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>