CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 193
that is already in effect, we could slim down the section to just these lines:
@media (min-width: 360px) { / tablet overrides /
#cnt { width: 67%; float: left; }
#nav { width: 33%; float: right; }
}
18.5.4 NCA Laptop Layout
On a desktop or large laptop, we want the heading to span the whole device,
and the content, navigation, and advertisements to share the width of the
screen. We also want the content to be in the middle of the screen, with the
navigation to the left and the advertisements to the right.
This is a bit more tricky because the navigation appears first on the screen,
but the content appears first in the HTML. We can handle this by bundling
them together in a new div that we will call CN. The C part will float right
in the CN container, and the N part will take the remaining space.
We must go back to the HTML and add a div with id=CN that contains
the other two divs, id=cnt and id=nav. Then we can style it as follows:
@media (min-width: 800px) { / desktop overrides /
#CN { width: 75%; float: left; }
#cnt { width: 67%; float: right; }
#nav { width: 33%; float: left; }
#adv { width: 25%; float: right; }
}
18.5.5 Try it!
Build this model. Then put it in your browser and try resizing the browser
window (the viewport). When it goes below 800px does it change to the
other layout? When it goes below 360px, does it change again?
Granted this is not the most elegant layout. It’s not too bad, but you can
probably come up with something better. The point is to show you how it
is done, to get you thinking.