A Better Jazz Calendar

Contact Us or call 1-877-932-8228
A Better Jazz Calendar

A Better Jazz Calendar

Let's now apply the same process to the Jazz Calendar page - open the file FlexibleGrids/Demos/jazzcalflexible.html in your browser. We'll use a width of 90% for the outermost (#container) div. The container div (#main) inside of #container gets a width of 93.75%, since 900 / 960 = 0.9375.

The left column - with the "Welcome" title and the four individual gig listings - gets a width of 54.888888%. The containing element (#main) has a width of 900px; the element itself (#maincontent) has a width of 494px. Thus, 494 / 900 = 0.5488889, or 54.888889%, which we round down to 54.888888%. (Rounding down ensures that we don't have an extra little bit of width - totalling more than 100% - to misalign our floating elements.) No worries about a bunch of decimal points at the end - that's fine.

The same goes for the right column: a 259px-wide element sits inside a container of width 900px. The calculation is 259 / 900 = 0.28777778, or 28.777778%, rounded down to 28.777777%.

calculating percentages

Leaving the padding and margin values for individual elements in pixels would mean that the elements won't line up all the time - as the browser window resizes, the padding and margins would remain fixed, and thus would not render the design so that the logo and the left side of the main navigation, say, line up vertically. We address this by making the paddings and margins percentage based, as we did with the widths.

Here's the CSS for the final design: flexible and (somewhat) responsive.

Code Sample:

FlexibleGrids/Demos/css/jazzcalflexible.css
body {
	background-image:url('../images/bg_page_notes.gif');
	font-family:Arial,sans-serif;
}

a {
	text-decoration:none;
	color:#a65c4c;
}

#container {
	width:90%;
	margin:0 auto;
	background:#fff5ea;
}

#main {
	width:93.75%;
	margin:0 auto 5.888888% auto;
	background-color:#c0cbd0;
}

header {
	background-color:#a67947;
	padding:0 0 0 4%;
}

header h3#tagline {
	float:right;
	font-size:12px;
	color:#fff;
	font-style:italic;
	margin:4% 4% 0 0;
}

nav {
	background-color:#2d5668;
	padding:1.111111% 0 1.111111% 4%;
}

nav ul {
	display:inline;
}

nav ul li {
	display:inline;
}

nav ul li a {
	color:#fff;
	text-decoration:none;
	margin-right:0.9%;
}

#main #maincontent {
	width:54.888888%;
	float:left;
	padding:4%;
	background-color:#ffedd9;
}

#main #maincontent h2 {
	font-size:22px;
	font-weight:bold;
}

#main #maincontent .performance {
	margin:36px 0 0 0;
	float:left;
	width:46.558704%;
}

#main #maincontent .performance img {
	margin:0 0.9% 10px 0;
}

#main #maincontent .performance h3 {
	font-size:20px;
}

#main #maincontent .performance h3 a {
	color:#2D5668;
	text-decoration:none;
}

#main #sidebar {
	width:28.777777%;
	float:right;
	padding:4%;
}

#main #sidebar h3 {
	font-style:italic;
	font-size:20px;
}

#contactinfo {
	clear: both;
	background-color:#a67947;
	padding:1.111111% 0 1.111111% 4%;
}
#contactinfo p {
	color:#fff;
}

We've gone a long way toward making an originally inflexible page more responsive. But there are still problems - the images, in particular, offer a challenge, since they don't scale to match the changing widths as we resize the browser. And the page certainly isn't optimized for mobile viewing. We'll address these issues as we progress through the course.

Next