to fit into variable-size columns. Breaking columns with spanned elements About halfway down our article we've got an aside element, which is acting a bit like a pull quote. We're going to use this to break up our columnar layout by applying the column-span property to the aside element. While we're at it, we'll add a border to the top and bottom to help separate the element visually. Column behaviour Reload the page in your browser to see the breakout aside in situ. Notice that the columns now fill left to right above the /aside, aside , and then pick up again beneath it with the content that appears after it. This is important behaviour to recognise when using columns -- any element that spans columns breaks the structure. Applying column rules As well as providing a border to the spanning elements, we can also apply a defined visual separation to the columns themselves by using the column-rule property. This accepts arguments similar to the border property in CSS. Try adding the code below to your article rule in the stylesheet, to see an example of column rules in practice. Style the footer We'll use some of the properties we've covered above to style the footer element, which is going to round off our article nicely. First it should span the columns, have a border top and bottom, and we'll add some margin and padding to help it get some distance and sit apart from the content a little. Add