Over the last few weeks we’ve seen how to develop both fixed width and fluid layouts with html and css. Each has its pros as well as its cons. Hybrid layouts are attempts to gain the pros of one type of layout while minimizing some of the cons.
Today I want to present 2 hybrid layouts. The first is a modified fixed width layout that gives the appearance of being fluid and the second is a modified fluid layout that attempts to rein in the longer lines of text.
These aren’t the only 2 hybrid layouts, but hopefully they point the way toward techniques you can use to create your own hybrid layouts.
As always if you simply want the code here are the demos
- Fixed content and fluid background
- 2 column fluid layout with max-width
- 3 column fluid layout with max-width
Fixed Width Content, Fluid Background
The trick to this layout is to use container divs around each row of content within our layout.
This allows us to use the inner div for fixing the width and centering what’s within while allowing the the outer div to stretch from edge to edge in the browser.
By setting backgrounds on the outer div we give the appearance that the layout is fluid, while we maintain control over the content itself. In a sense we create a layout within the layout. This inner layout is fixed, while the outer layout is fluid.
The html below is similar to the fixed width layouts we’ve previously discussed.
Header content here