main content here: fluid width
The Swiss Army Knife of Layouts
This layout is a basic 3 panel setup, but with some nice features:
- the right, content div is a fluid width, although could be fixed by setting non-percent wrapper width.
- it has a sticky footer.
- It uses a colored left border to avoid the use of a faux column image for the background color.
- The #wrapper div can be adjusted to show the background color/image surrounding the main content. The sample layout has height:95%, width:80% with top-margin 10px.
- It degrades quite gracefully as browser is resized, although in many cases you may want to put a min-width somewhere to avoid any degrading at all.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in diam. Pellentesque eget sapien non nibh hendrerit ultrices. In hac habitasse platea dictumst. Cras rutrum ante eu tellus. Proin elementum turpis et tortor. Vestibulum vel nunc vel mi aliquet laoreet. Aliquam bibendum, nulla vehicula tempor commodo, pede pede dictum tellus, at tincidunt sem nisi sit amet ligula. Aliquam scelerisque, orci eget condimentum fringilla, nulla quam suscipit neque, ut ultricies ligula ipsum quis metus. Nulla quis leo.
Curabitur eget nibh vel enim eleifend accumsan. Etiam pharetra rutrum neque. Praesent accumsan. Nulla facilisi. Vivamus suscipit, magna a porttitor bibendum, tellus mi pharetra velit, id fermentum turpis ligula at massa. Ut eu felis in augue fermentum vehicula. Pellentesque velit ligula, condimentum rutrum, malesuada in, bibendum et, ligula. Ut ac ligula. Quisque turpis. Vestibulum elit leo, luctus vel, congue et, ullamcorper et, felis. Vivamus risus ipsum, semper sit amet, vulputate eget, ullamcorper vel, tortor. Nam mi. Maecenas sed eros. In hac habitasse platea dictumst. Quisque dignissim accumsan diam. Proin blandit.