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. So, 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!