As my Applied Web Design students are beginning to step out into the world of website layout schemes, there are two main tools we plan to use to help us to structure and style 2 and 3-column layouts: the HTML5 Doctor’s HTML5 Element Flowchart and learnlayout.com.
HTML5 Element Flowchart
HTML5 Doctor’s HTML5 Element Flowchart to help you determine which containing element to use.
In the old days, we used to code everything in a div as a container, and we simply gave it various id values to identify the use of that div and target the div for styling.
If it was the webpage banner, it had an id of banner; if it was a navigation bar, we might give the div an id of “navcontainer”, and on and on. We were left with 20-some odd divs:
<div id="page"> <div id="banner"> <div id="navcontainer"> <div id="content"> <div id="sidebar"> <div id="footer">...
With HTML5, we can stop the insanity and apply the “sectioning content” elements. Use the flowchart to determine how to use the new tags:
<header> <nav> <section> <article> <aside> <footer>
Learn Layout
Learn CSS Layout – this is the article I wish I had back during the many times I was trying to figure out why my CSS was behaving so strangely.
Once you’ve figured out your structure to your template, your next job is to learn the various CSS techniques to craft your 2, 3 or more columns using various CSS tricks and styles.
Read the various articles on CSS layouts. Pay close attention to position, display, the box model, float, and float’s evil twin, clear. Get the standard concepts down, and once you do, learn the flexbox model. Finally, once you’re done learning all that, relax and enjoy the fact that you were not trying to figure this out back in the day.
Stay tuned for more posts and videos…