4.3: Styling HTML Tags to Create Familiar Multi-Column Layouts
This tutorial demonstrates how to use the <div> tag with CSS to create a familiar multi-column layout. You will use this tutorial to convert your simple example webpage into a sophisticated 3-column layout. Please use the HTML and CSS files attached here as examples while you work through the reading.
These CSS Challenges provide example HTML code prepared for the common 2-column layouts found throughout the Web today. They challenge you to produce CSS code that formats them. In a sense, this is the culmination of all the skills you have learned so far, so return to this challenge frequently to test your skills.
Using the examples provided in this sub-unit and the skills you have developed by working with the CSS Challenges, now try to apply a 2-column or 3-column layout to your example website. This will entail editing both your HTML and your CSS. You might consider reusing some of the CSS code you developed for the CSS Challenges for this assignment - remember that modularity and reusability are two of the merits of abstracting presentational markup from semantic markup. Work towards making an aesthetically pleasing and usable website from the materials you have already developed. At this point, you have enough background information to hunt online resources for ideas, code snippets, and tutorials to help your realize virtually any design you can imagine.