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

then, when the screen is wide enough, additional styles are applied to break the content into two columns. For
this example, the media query that applies these rules is set to match any screen smaller than 768 pixels, which
is a common tablet resolution.
the styles aren't anything too crazy: blog entries are floated left, and sidebar content is floated right, which
arranges the content into two columns:
@media screen and (min-width: 768px) {
article {
position: relative;
float: left;
width: 55%;
margin: 0 3% 2em 0;
}
aside {
float: right;
width: 42%;
margin: 0 0 2%;
padding: 0;
border: none;
}
}
Not ■ the use of percentages allows the columns to grow or shrink depending on the screen size. When viewing this
layout in a desktop browser, you can resize your window to see the content reflow to utilize available space.
once the layout is completed, narrow screens will see a single-column layout with ads acceptably nestled below
the first entry (Figure 5-2 ).