For my responsive home page, I would like to have a 2-column design for the desktop, and for mobile just have one column.
On the desktop, there would be a narrow right column that looks similar to where Google news has its highlighted articles. But for mobile, I need those highlighted articles to collapse down into my main single-column bucket.
What is the best way to achieve this in a responsive manner?
See
and
There are a few options to make columns. Making them collapse to one is usually just a case of altering what you set in a media query.
Which would be the best for a newb?
Since I haven’t had $$$ to buy any books, my RWD knowledge is stunted! I know there are lots of free tutorials, but it gets overwhelming knowing where to start.
The best method will depend on your needs.
Float is useful if you don’t want the minor column to be the full length of the page. The main content will wrap under it after it has ended, not wasting any space. In this example, the floated sidebar ends, then content flows under it, as opposed to this, where the sidebar content ends, then there is blank space. It is I believe universally supported, having been around a long while.
The down side to Float is the order. It will always be before the content it goes alongside, even if on the right. So when you collapse to one column, the side content will display above the main content.
Display Table is another option that is quite well supported. It will create full length columns. You can also have multiple rows if you like, just like a table. Again, pay attention to order, in this case the content in the left cell (column) will always be before the right one. So if your sidebar is on the right, it will be below the main content when you collapse to one column.
Flex-Box is a newer more powerful option, this will give you the ability to change the order of content, among many other neat tricks.
Columns are new and quite good, but not for things like sidebars. Use them for content that flows from one column to the next, like in a newspaper. It’s good for long lists with short items.
Thanks @SamA74!
Now I recall what you explained about Floats and wrapping versus full-length columns.
Based on your options, it sounds like Display: Table or Flexbox would be the way to go?
Can you recommend any online tutorials that really do a deep-dive on those two approaches?
Both are good. Flexbox is a little more complex, but more powerful.
Now you’re asking.
I just used [this page][1] as reference while experimenting with flex-box.
Also I noticed [this article][2] in a recent post, though I have not read it all, it may be useful to you.
Display table is fairly straight forward, if you already understand html tables. It basically makes other elements mimic the behaviour of tables.
One difference is, if you use it for just columns, as in not multiple rows for a grid layout, you don’t have to define rows.
A main container is the virtual table and its children are table cells.
<div id="container">
<div class="column" id="main">main stuff</div>
<div class="column" id="side">side stuff</div>
</div>
#container {
display: table;
width: 90%;
}
.column { display: table-cell; }
#side {
width: 30%;
}
Note, if you do not define any width in the cells/columns, the width is governed by content (which can be useful sometimes) just like a table. If the container has table-layout: fixed; both (all) columns will be equal width.
There will be other things you will want to set in the css, but that’s a start.
When you want to lose the columns, add a media query with:-
.column, #container { display: block; }
#main, #side { width: 100%; }
or similar.
[1]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[2]: http://www.sitepoint.com/easy-responsive-css-grid-layouts/
Don’t you have to worry about “divitis” when you use display: table ?
The elements used do not have to be <div>s, use whatever element fits semantically with the usage. I use <div>s in the example as they are just the generic block element. You may use for example <article> for the main content and <aside> for the sidebar.
Besides, different page sections need some form of container in any case, these have a container of their own and a master/parent container. I wouldn’t say that was over <div>ing it, but fairly typical in any layout method.
If you use it for a grid-like layout, which would require a master table container, then row containers as children, then cell containers as grandchildren, then it may get a bit <div>ey.
Sam,
Yeah, I wasn’t criticizing your example, but was thinking more if you created an entire table using div’s.
I am reading up in display: table and trying to get my hands around why it is not evil and just another form of using tables. (Honestly it doesn’t feel natural.)
If I could quickly learn a few layout approaches, I think I could start building responsive websites, which is important because I need the money!! 
I know what you mean. There was always the thing of people drumming into you to not use tables for layout, unless it is for tabular data.
Well that still holds, but in the case of display table, you are not using tables as far as html is concerned, you are using <div>s or whatever seems an appropriate container, there are no <table> tags to be seen.
It’s all about keeping content and presentation separate. Html takes care of the content, keeping it all in the appropriate containing elements, while css does the presentation, that is layout, fonts, colours etc… display table is a layout tool used in css, no different to or more evil than using any other display mode on an element.
That makes a little more sense. Because we are controlling the layout using CSS (on HTML elements), there is still a separation between content and presentation. I suppose using display: table is no different than using a float or even padding and margins to affect layout.
That’s it. Like using padding and margin instead of and <br/><br/>
We have all seen it.
I’m still having a hard time thinking “responsively”…
In addition to using display:table to go from 2 side-by-side columns to 2 stacked columns, could I do this…
Have two div’s, and in one media query make them width=70% and width=30% and then in the second media query do width=100% for each?
Why two media queries when only one is needed?
Yes, I guess I could have one state be the default and use a media query to toggle things.
There’s an approach called “mobile first”, where you basically set the styles you’d use for a small screen (e.g. with elements spanning the fill width) and then throw in some @media rules for lager screens, specifying that there be columns etc.
The advantage of this is that older browsers that don’t know about @media rules also get some styles, even if not the ones you wanted for wider screens.
And you must also reset the display from table to block, just as I posted earlier:-
Otherwise you will still have a two column container block that is 200% wide! Not good.
That is the usual way of doing things.
You may do things either way, whichever you prefer to work with.
In Mobile First, the mobile styling is the default and you use a min-width query to adjust for big screens.
Or vice-versa for Desktop First, using max-width to adjust for small screens.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.