At this point we want to take the Static Layout
http://thomaswallace.net/demos/responsive/static/
and convert it to something more responsive.
For Example the grid we created in class used the following dimensions
.container{
width:960px;
margin: 20px auto;
}
header[role="banner"], footer[role="contentinfo"]{
width:920px;
float:left;
background:pink;
margin-left:20px;
}
#content{
width:638px;
margin-left:20px;
float:left;
background:blue;
}
aside{
width:262px;
float:left;
background:red;
margin-left:20px;
}
To convert this into something more responsive we need to use the following formula.
Target / Context = Result
Let’s work through this rule by rule.
.container
While we can certainly declare a percentage width for our containing element, I prefer to maintain some control over width so rather than declare in percentages for our containing element we are going to use the max-width css property. This allows us maintain limits on the overall width but at the same time we can still scale down as needed.
#content
The fixed width dimensions of this element was 638px to convert this to percentages the math looks like so…
638px (target) / 960px (context)= 0.664583333
Slide the Decimal two places to the right and we have our first percentage width element!
New Width = 66.4583%
We also have a 20px margin to consider. Lets convert that to percentages as well.
20px (target) / 960px (context) = 0.0208333333
Slide the Decimal two places to the right.
New Width = 2.08333333%
Go ahead and convert the rest using this formula. When you are done you should have something like this…
.container {
max-width: 960px;
}
#content {
width: 66.4583%;
margin-left: 2.083333%;
}
aside {
width: 27.2916667%;
margin-left: 2.083333%;
}
header[role="banner"], footer[role="contentinfo"] {
width: 95.83333%;
margin-left: 2.083333%;
}