Top

Left

Main

This layout has four main sections: a header, a footer, a left sidebar, and a main content area. All but the main content are fixed to the browser window; the content area scrolls with the main browser scrollbar. The fixed areas are positioned with a higher z-index than the main content, meaning that they cover it up. There is also a fifth area responsible for the background of the content area; it is also fixed. If you try removing it and applying the background directly to the content div, you may see some issues when the page scrolls.

You can easily vary this layout by changing the dimensions of the different areas, removing one or more of them, changing color, backgrounds, border treatment, etc. You can also modify the fixed width design to something that scales with the browser window.

There are a few ways in which the HTML of the page has been altered to accommodate the styling. The addition of the empty background div is one, and the extra line breaks at the end of the content area is another. Ideally these would not be necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl lacus, egestas ac sem volutpat, tincidunt euismod velit. Morbi placerat sapien ac mi egestas luctus. Sed sed augue euismod, tempus lacus eu, consectetur tellus. Fusce rutrum eros a magna mattis ultrices. Fusce justo urna, lobortis vitae sapien eget, lobortis tristique erat. Ut sit amet placerat arcu. Phasellus lobortis libero elit, a semper lorem laoreet at. Vivamus vitae metus in nisi rutrum bibendum id sed dui.

In volutpat lacus est, sit amet auctor mauris congue sit amet. Etiam ornare et mi sed sodales. In malesuada magna pretium mi sollicitudin, ut luctus nunc eleifend. Etiam massa risus, feugiat rhoncus elit sed, ullamcorper molestie lacus. Suspendisse pellentesque, elit eu finibus rhoncus, libero leo consequat felis, ut ultricies libero erat vitae leo. Donec dignissim quis libero et accumsan. Praesent tincidunt purus a tristique consectetur. Praesent condimentum eros eu ultricies condimentum. Nullam eget nunc eu diam sollicitudin tincidunt. Donec at augue vestibulum, porttitor lacus at, egestas eros. Nullam imperdiet et nisi non hendrerit. Praesent a lorem eget ex ornare facilisis. Sed in tincidunt nulla, eu consectetur felis. Mauris vitae dignissim est.

Morbi lobortis, arcu vel semper ornare, lectus ipsum dignissim erat, id faucibus leo augue semper nisl. Quisque eu eleifend nulla. Ut pharetra diam quis lacus vulputate, in malesuada turpis varius. Morbi sit amet condimentum mauris, vel commodo urna. Phasellus iaculis lacus vel nunc semper, a egestas ipsum volutpat. Donec a malesuada urna. Donec at ante at massa accumsan pulvinar in id elit. Pellentesque ac consequat lectus.

Sed sed commodo felis, at ullamcorper risus. Praesent ac porta nisl. Vestibulum libero sapien, dapibus nec turpis sed, congue blandit elit. Integer vulputate purus ut velit ultrices tincidunt. Fusce tempus arcu metus. Nam orci dui, ornare at lacinia vel, pellentesque sit amet lacus. In posuere lacus sed faucibus tempor.

Nullam varius nisl sit amet congue lobortis. Etiam nec orci ante. Quisque et facilisis dolor, quis fermentum dui. Morbi commodo fermentum tristique. Fusce dapibus magna vitae est ullamcorper rutrum. Donec posuere auctor ipsum, non rutrum turpis bibendum non. Duis pretium sem eget orci semper pretium. Sed ut est nec justo hendrerit faucibus.

Footer