Responsive Design – Multi Column Layout

Published by Kevin T.
responsive1
The following is an example of an adjustable width, 3 column / 1 row layout that will respond well to smaller screens such as smartphones and tablets. If you view this code on a smartphone (portrait orientation), it will adjust to a 1 column / 3 row layout. Add or remove columns as desired. Change the percentages of the columns to use the amount of space you need for each one, without going over 100% (including padding width).
I am leaving the css in the style tag for this example, however it is recommended that you put it in a .css file and call them with the class tag.

<div style="width:100%;">

<div style="text-align:center;"> <!-- This will center the three blocks of text/images with the width of the container. -->

<div class="multi-col" style="width:30%; min-width:250px; display:inline-block; padding:3%; text-align:left; vertical-align:top;"> <!-- text-align:left will left justify the text within this particular block. -->

This text is left justified. If you enclose your text/image within a DIV, you must set the DIV style display:inline-block in order for the alignment to function. If you want more space in between each column, increase the padding. Make sure you also decrease width:30% so that the total width of all the columns + padding is less than or equal to 100%. The vertical-align:top makes sure that the text is pushed to the top of the container. If you want to center the text vertically, use the value – middle.

</div><div class="multi-col" style="width:30%; min-width:250px; display:inline-block; padding:3%; text-align:center; vertical-align:top;"> <!-- Important! The ending div and next starting div must be right next to each other in order to display correctly using 100% of the screen. This is because browsers insert a pixel width in place of the code’s whitespace between divs which will then put you over 100% and ultimately limit you to using 99% with this method. -->

This text is centered. The min-width makes sure that as the screen gets smaller, the width of the text does not get too small to easily read. You may want to adjust this value smaller if you have more than 3 columns to display.

</div><div class="multi-col" style="width:30%; min-width:250px; display:inline-block; padding:3%; text-align:right; vertical-align:top;">

This text is set to the right. If you are using this code to create something like a menu, you should take out the multi-col class so that the line of menu options do not break prematurely as the screen gets smaller.

</div>

</div>

</div>

The CSS class .multi-col is needed when the screen size is small and you want the text of each column to take up 100% of the screen.

@media (max-width: 450px) {
.multi-col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}

Lastly, this line goes within the HEAD section of your HTML file:

<meta name=”viewport” content=”width=device-width” />

And here is what it looks like. Resize your browser’s window to see how it performs.

This text is left justified. Lorem ipsum dolor sit amet, ocurreret scribentur an duo, ubique iisque at sea. Ad sit cibo sanctus evertitur, sit ei nulla graeco aliquando. Exerci interesset ut sea. Ne tritani iuvaret vel, sea eros tincidunt in. Te sit vidisse laoreet consulatu, docendi inimicus voluptatum sed eu. Duis dicta ius ea, option fuisset fastidii vim ei, cum inani voluptatibus ne.

This text is centered. Cibo ferri cum ea, at dicam eloquentiam definitionem pri. Vim eu labitur facilis delectus, ne sit aperiam similique, an eam tractatos suavitate philosophia. Mel at convenire quaerendum, eu veri interesset sed. Tempor pertinax invenire eos eu, pri ad insolens quaestio. Te has recteque democritum, sed prima discere minimum cu, tota possim opor.

This text is set to the right. Ad vel suas sapientem, mucius mollis ad eam. Eu quo nihil labore similique. Everti doctus animal id mei, solet facete democritum id nec. An odio petentium definitiones vix, appareat legendos no his. Est te solum perfecto, ei vidit omnesque molestie quo. Ut mollis regione quaestio vix. Et mazim ubique graeco est. Etiam sonet eruditi et mel, no eum accusamus.