The Three Columns Dilemma

Today I set out to replicate this three column gem from Brad Frost using CSS.

I structured this by placing columns 2 and 3 in <div> tags, and the main content in a <main> tag. Once getting everything in order as far as a mobile view, the issue I quickly ran into was getting the main content in the middle once I added a media query for larger screens. Before tackling this thing I assumed I would be floating them all and Internet magic would sort everything out. Well, I was half right.

Floating all the elements was necessary, however, the second and main columns needed a bit more convincing to line up through the use of margin-left values.  Screen Shot 2014-01-15 at 12.44.37 PMScreen Shot 2014-01-15 at 10.37.44 PMSo, while I plan to dive into grids this week, I decided to punish myself first and do things this way. Brad Frost also has a collection of responsive patterns that make perfect practice pieces.

See the Pen Responsive Columns by Joni Trythall (@jonitrythall) on CodePen.

Happy column sorting!