For most sites, a two-column design does not fare too well in the narrow confines of a smartphone screen, and no wonder, since such a layout is usually chosen to optimize the horizontal space available on the average computer monitor. In view of this, when displayed on a mobile device, websites created with the responsive web design philosophy are often provided with a special cascading style sheet ("CSS") that rearranges the columns so that a mobile user can still use the site comfortably. This article shows you how this can be done.
If you have arrived at this article thinking that it teaches you about how you can make a two column website from scratch, please read How to Create a Website instead.
This is the second chapter in my series on How to Make a Mobile-Friendly Website: Responsive Design in CSS. If you have not read the first chapter, you may want to do so before continuing. I will pick up where I left off without reiterating anything that I have already covered.
I will only deal with designs that have their two column effect created by applying CSS rules on DIV blocks. For example, if your site uses the two column layout taught in How to Design a Two Column Layout in CSS, this tutorial will help you adjust your code so that your pages will show only a single column on a mobile phone.
However, if your site uses the old webmaster idiom of having a single table to hold your two columns (where the columns are simply HTML table columns), you will not find the tips in this chapter relevant. I suspect you can still make that table mobile-friendly by using massively ugly CSS hacks, but such gimmickry is outside the scope of this chapter.
If your website has only one column, please read How to Make a One Column Website Mobile Friendly instead, since it's more relevant.
If you don't have an existing site that you need to modify, and are coding from scratch, you can also use the Free Layout Wizard to generate the HTML and CSS for a mobile-friendly two-column (or even three-column) website. In such a case, you probably don't have to read this article since all the code needed will be created for you according to your specifications.
There are myriad ways to create a two column design with CSS, even when we confine ourselves to using only DIV blocks
(and not other HTML elements). For example, the Two Column
and Two Column with Header
and Footer demos from the article
How to Design a Two Column Layout
uses the float property to create the columns, while thesitewizard.com itself uses absolute positioning
to accomplish the same thing. And those are definitely not the only ways. In fact, an earlier version
of that article used yet another method (also with floats). And that doesn't even take into account the
possibility of using relative positioning to do the job. And so on. CSS is very flexible.
In spite of this, the task of making your site mobile-ready depends more on your web page's HTML structure than your existing CSS.
Let's take a look at one arrangement of the HTML code of many 2-column websites:
In this arrangement, the DIV block containing the real content of the website (#content) comes first,
while the code for the side or navigation column (#navbar) comes later. This is essentially the same order
used by thesitewizard.com for its pages, as well as the
2-column layout demo.
If you think about it, this HTML page, as it stands, is already mobile-ready. The only thing interfering with its mobile-friendliness is your desktop CSS code that arranges the DIV blocks into columns. Without that code altering the layout of your page, a smartphone will simply display everything in the HTML order, with the content DIV block first, followed by the navigation column. For most sites, this is what you want, since people visit a website for its content, and only when they are done with it, do they need to use the navigation menu.
In other words, for those of you with this type of structure, the solution is incredibly simple.
In the above example, the CSS code common to all devices is placed in the all.css file.
It may, for example, contain code that sets
the background colour ("color" in
US English),
fonts used, etc. The code that creates the 2 column effect is placed in the two-cols.css file,
which is only applied when the screen has a minimum width of 630 pixels. (Note that 630 is an arbitrary
number that I picked for this tutorial. Please see the previous chapter, if you don't know what width to use.)
For those who prefer to put everything in a single file, here is the same thing collected together in one style sheet:
The above code happens to use the CSS described in my two column tutorial to create the columns, but you can always substitute your own 2-column code in its place.
What if you have a header and footer div block like in the
Two Column with Header
and Footer Layout Demo? In such a case, on a mobile device, the header block will be displayed first,
followed by your content, the navigation column and finally the footer. If you have put sensible things in
those blocks, like your logo or page title in the header and copyright notice in the footer, then
everything should still be in a logical and useful order for your smartphone visitors. You can see it for
yourself by viewing the demo
in either a mobile phone or with your desktop browser window resized to (say) 320 pixels wide.
Browser Compatibility: When you code your CSS this way, what do people who use old web browsers see? By "old browsers", I mean versions of browsers that do not implement the media queries facility.
Everyone using a mobile phone browser, whether old or new, will get the single column layout.
Everyone using a modern desktop browser will get the two column layout.
Everyone using an old desktop browser will get the single column layout.
My demos put the two column code in a different place. Here's the code from the demo, distilled to contain only the portions relevant to this tutorial and collected together into one style sheet with added comments:
Since the two column code is not enclosed within a set of media queries conditions, it applies at the start to
all browsers. Then, when a mobile browser encounters the media queries section, it will apply the additional rules in
that section. Since the #content and #navbar div blocks are already floated out of the
normal page flow by that time, thanks to the earlier two column code, the new rules have to undo everything. It does
this by setting float: none to undo float: right, and
width: 100% to reverse the width settings of 80% and 20%.
The effect of writing the CSS rules in this way is to affect browser compatibility thus:
Everyone using a desktop browser, whether old or new, will get the two column layout.
Everyone using a modern mobile browser will get a single column layout.
Everyone using an old mobile browser will get a two column layout.
If old desktop browsers don't matter to you, I think the first method is easier to understand and maintain. You don't have to worry every time you add a rule to your style sheet, whether you need to reverse it in your mobile CSS. Of course, if you are willing to use JavaScript (as mentioned in chapter 1), you can have the best of both worlds, and have even the old desktop browsers display your ideal layout. But as I said, these old browsers are probably near extinction these days, and it may not be worth your time and effort to code for them. However, you should check your web statistics to be sure, just in case your site's browser usage is drastically different from mine.
What if your HTML is arranged as follows?
In such a case, you don't want the mobile layout to follow the HTML order, since the first thing a visitor will see is the navigation menu rather than the content. You need some way to move the second DIV block so that it is presented before the first one.
The trouble is that in order to solve this easily, you will need to use the new flexible box CSS facilities (or "flex box" / "flexbox" as it is commonly known) which are only reliably implemented in modern browsers. And when I say modern browsers, I mean versions that are even newer than the list I specified for media queries support. For example, my simple flexbox demo web page requires at least the following browser versions:
Desktop browsers: Internet Explorer ("IE") 11, Microsoft Edge, Firefox 28 or later, Chrome 29 or later, Safari 9 or later, Opera 12.1x (Presto), Opera 17 (Webkit/Blink) or later.
Mobile browsers: Safari (iOS version) 9.2 or later, Android 4.4 or later, Blackberry 10, Opera Mobile 12.1 or later, or IE mobile 11.
Without CSS flexbox, I imagine that you will have to compute the height of your content DIV block so that you can move your navigation block to a spot after it ends using absolute positioning. This is probably not practical for most sites, since you cannot then just add new content as and when you want, otherwise the height will change. I suppose another way is to simply let mobile users see the navigation menu first before your content.
For those willing to use the new CSS flex box facilities, you will be surprised how easy it is to move DIV blocks around and create multi-column sites with it, compared to the traditional CSS way of doing things. It is, after all, designed for that purpose.
Below is the CSS code from the demo page, with all the irrelevant bits removed, and some things rearranged and added
to make things easier to understand for tutorial purposes. For the same reason, I have also put all the CSS code together
in one style sheet here, even though the demo site uses media queries in the <link> tags.
Let's dissect the code.
To create the two column site, I set the containing DIV block to use display: flex instead of
the default display: block. This allows us to set the order of the child DIV blocks, that is, the DIV blocks
enclosed within #container. The flex-flow: row rule instructs the browser to arrange
#navbar and #content horizontally next to each other. The order in which those blocks
are arranged is specified by order: 1 for #navbar, since I want the side column on the left,
and order: 2 for #content. The wrap portion of the flex-flow rule
merely says it is to wrap blocks that cannot fit so that it goes below. However, wrapping isn't actually needed here
since the total widths of the two blocks equal 100%.
On resolutions below 630 pixels, I set flex-flow: column, arranging the enclosed DIV blocks vertically
instead of horizontally. Since I want #content to come first in such a case, I give it order: 1,
and set the other block to order: 2. Yes, it's that simple: you set the order of the blocks by simply
giving it a numerical value. And 1 comes before 2, which comes before 3, and so on.
There's another facility that I use from the flexbox family of rules: align-items: stretch.
Notice that the navigation column in the flex box
demo has the same height as the content one in the two column mode, even though I did not pad that column with blank lines
nor did I use some ugly CSS hack to accomplish it. This align-items: stretch rule causes the browser to
stretch the block so that the heights of the child DIVs are equal in flex-flow: row mode, and the widths
are equal in flex-flow: column mode.
In case you're wondering how this is different from the non-flexbox CSS code I use for thesitewizard.com itself (or even the non-flexbox two column layout demo), realise that the two columns on all of thesitewizard.com's pages are actually uneven. On most pages, the navigation column is shorter than the content column. I disguise this fact by giving both columns the same background colour. The two columns in the flexbox demo, however, are actually of equal height, and I can add content to either column with impunity without worrying that their heights will ever become unequal since the browser will adjust both columns automatically so that they are the same.
However, as I said, the ease and simplicity of arranging blocks on the screen with flexbox comes with a price: compatibility. Of course, whether this is an issue depends on the demographics of your website.
For those who have lots of visitors with old browsers, you can improve the situation by using flexbox only in your code for mobile phone users. That is, instead of using the flexible box CSS to lay out your two column website for desktop users, stick to your current CSS code. Only use flexbox in the smartphone portion, enclosed by media queries conditions.
As you may have guessed, flexbox can be used to re-order your blocks in any number of different website designs, from 3 column layouts to even more unusual ones involving multiple blocks placed all over the shop. The blocks can be hoisted out of its HTML order to any position you like, making modification for the small screens of a mobile device relatively simple.
Alternatively, if you prefer not to use flexbox, but something that also works on older browsers (eg, using floats), you can also generate a mobile-friendly 3 column website using the Layout Wizard. The latter also lets you choose the order of your columns on a mobile phone.
In the next chapter, I will address the issue of getting your website images (pictures) to fit on mobile devices.
Copyright © 2016-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Make a Two Column Website Layout Mobile-Friendly
