Making the Inflexible Flexible

Contact Us or call 1-877-932-8228
Making the Inflexible Flexible

Making the Inflexible Flexible

Consider the page FlexibleGrids/Demos/inflexibledemo.html - open up the file in your browser. It's a layout similar to our Jazz Calendar page, but much more simple. A header (gray background) sits at top, two columns (red and blue) float left and right, respectively, in the middle of the page, and a footer (green) sits at bottom. The 960px-wide design is fixed in width and center justified. The columns split by a ratio of 600px (the left red column) and 360px (the blue sidebar).

inflexible demo

But note that, when we resize the browser, the design remains at a fixed width:

inflexible demo

Code Sample:

FlexibleGrids/Demos/inflexibledemo.html
<!DOCTYPE html>
<html>
<head>
  <title>I'm Inflexible</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/inflexibledemo.css" />
</head>

<body>
  <div id="container">
	<header>
	  <h1>I'm Inflexible</h1>
	</header>
	<div id="maincontent">
	  <p>main content</p>
	  <p>main content</p>
	  <p>main content</p>
	  <p>main content</p>
	  <p>main content</p>
	</div>
	<aside id="sidebar">
	  <p>sidebar content</p>
	  <p>sidebar content</p>
	  <p>sidebar content</p>
	  <p>sidebar content</p>
	  <p>sidebar content</p>
	</aside>
	<footer id="contactinfo">
	  <p>footer content</p>
	  <p>footer content</p>
	  <p>footer content</p>
	</footer>
  </div>
</body>
</html>

Code Sample:

FlexibleGrids/Demos/css/inflexibledemo.css
#container {
	width:960px;
	margin:0 auto;
}

header {
	background-color:#ccc;
}

#maincontent {
	width:600px;
	float:left;
	background-color:#f00;
}

#sidebar {
	width:360px;
	float:right;
	background:#00f;
}

#contactinfo {
	clear: both;
	background-color:#0f0;
}

A revision to this same page now shows a flexible, fluid grid - please check out the page FlexibleGrids/Demos/flexibledemo.html in your browser, too. Instead of a fixed, 960px container for the page, we now assign a width of 80% to the container. (80% is somewhat arbitrary, but seems close to the spirit of the original, fixed-width design.) Most importantly, we have set the width of the floated elements - the left red main column and the right blue sidebar column - with percentages rather than fixed pixels.

We find the relative percentage-width values by dividing the fixed width of the element by the width of its container element. Thus, for the left (red) sidebar, 600 / 960 = 0.625 - that's 62.5%. Similarly, the right (blue) sidebar gets a percentage width of 37.5%, since 360 / 960 = 0.375.

The design now shrinks or expands - with the entire design a percentage of the browser width, and the #maincontent and #sidebar elements scaling proportionally - as the browser resizes narrower or wider:

inflexible demo

The markup remains the same - we've not updated the HTML, just the CSS. But this subtle change - moving from fixed pixel widths to flexible percentages - already goes a long way toward rendering the design more responsively.

Code Sample:

FlexibleGrids/Demos/css/flexibledemo.css
<!DOCTYPE html>
<html>
<head>
  <title>I'm Flexible</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/flexibledemo.css" />
</head>

<body>
  <div id="container">
    <header>
      <h1>I'm Flexible</h1>
    </header>
    <div id="maincontent">
      <p>main content</p>
      <p>main content</p>
      <p>main content</p>
      <p>main content</p>
      <p>main content</p>
    </div>
    <aside id="sidebar">
      <p>sidebar content</p>
      <p>sidebar content</p>
      <p>sidebar content</p>
      <p>sidebar content</p>
      <p>sidebar content</p>
    </aside>
    <footer id="contactinfo">
      <p>footer content</p>
      <p>footer content</p>
      <p>footer content</p>
    </footer>
  </div>
</body>
</html>
Next