Information Technology Reference
In-Depth Information
you know how many columns you would like to fill from the start, and use the
appropriate div statements. There are 12 columns, so whatever combination you use, it
should add up to 12 (i.e., in this case, 1 onecol and 1 elevencol). You'll also note that the
last column has the word 'last' on its div statement (see Listing 8-2), it lets 1140px Grid
know that it is the last column in the row and thus should fill the rest of the page.
Figure 8-14.
A snippet of the desktop view of Jon's Biosketch, fixed
The code for the 1140px example can be seen in Listing 8-2:
Listing 8-2.
Jon's biosketch using the 1140px grid.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The 1140px Grid · Fluid down to mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/1140.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container p {
color: #000;
line-height: 16px;
background: #FFF;
text-align: left;
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="onecol">
<p><img src=http://jonwestfall.com/wp-content/uploads/2010/03/jon-
website.jpg></p>
</div>
<div class="elevencol last">
<p>Jonathan E. Westfall, PhD, born 1982, is a researcher and technologist
working in New York City at Columbia Business School. His current research focuses on
