Our next pass at rendering the design matches the original specs: the individual-gig elements sit in the main content well, and the sidebar holds the correct content. The featured gigs are each an <article> (of class "performance"), sized and floated so that they display two across in the focus area of the page.
We've rendered the design successfully - one might take issue with the graphic design choices, perhaps, but we have achieved our first goal: the original design specs are realized as good web code.
But the page is inflexible - resize your browser or view the design on a mobile device and the page remains exactly the same. Our next task is to introduce some flexibility into the page.
Jazz Calendar is the resource for local jazz performances in our community. Stop back often to learn about upcoming gigs, read reviews of past concerts, and stay in touch with the jazz scene in our area.
The outer markup is exactly the same as in our first draft: the #container div wraps the whole site, #main sits inside it, and #maincontent and #sidebar float left and right, respectively. We've added elements inside #maincontent - each article of class performance represents one upcoming gig, with title, image, and detail content.