How to do Columns in HTML and CSS

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



A responsive 3 column layout using HTML and CSS


A responsive 3 column layout with different sized columns






Leave a Comment