Ben's Sandbox
  • Projects
  • Tags

Creating Multi-Column Layouts that Fill the Page


View Blog   View Source  
As a starting point for most applications, you're going to need some regions defined to place content. Those areas will need to be size to fit a certain space and retain the desired size when content is added and the user resizes the browser. Several CSS (and a bit of JS) techniques can help reduce the effort required to produce the desired effect. This page has several links to full pages that demonstrate these concepts:

  • HTML 3-Column Layout (Fixed - Fluid - Fixed) using Absolute Positioning
  • HTML Column Layout to Fill Window Height (Margin Overrun)
  • HTML Column Layout to Fill Window Height (Contained with Streched Pattern)
  • HTML Stretched/Column Layout with jQueryUI Widget Test


© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap