Determining the App’s Functionality and Structure - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 67

typically, a design like this might be marked up something like the following (simplified):
<header>...</header>
<section id="main-content">
<article>...</article>
<article>...</article>
</section>
<aside id="sidebar-content">
<div id="ads">...</div>
<div id="newsletter">...</div>
</aside>
<footer>...</footer>
this, however, puts the columns into “boxes” that don't allow you to reflow the content. to solve this, you'll
need to make each piece of content its own box:
<header>...</header>
<article>...</article>
<aside id="ads">...</aside>
<article>...</article>
<aside id="newsletter">...</aside>
<footer>...</footer>
this markup resembles what a single-column layout should look like: lead with an entry, then show ads,
then show another entry, and then show the newsletter signup. in the future, additional entries will flow beneath
the newsletter.
now you can use media queries to arrange the content into two columns when the screen is wide enough, but
stack content in an acceptable order when it's not.
Content reflowing with Media Queries
to get the content to display properly, start with the smallest screen size. nothing special about the markup; just
some basic styles:
article {
position: relative;
margin: 0 0 2em;
overflow: hidden;
}
aside {
margin: 1.5em 0;
padding: 1.5em 0;
border-top: 1px dashed #955240;
border-bottom: 1px dashed #955240;
}