CSS

Split screen - Left

A VERY Simple Method

Why?

A modern method of having a two column
50% / 50% layout with different background images in
each half and both columns the same height irrespective of content.

What happens normally is the backgrounds are chopped to the initial viewport
height and when scrolling the background image does not extend to the full height of the container.

With this method there is no chopping of the backgrounds on scroll, no matter what the content.

Uses the html and body elements ONLY and having additional background images in the content of each half.

Tested in IE7, IE8, Firefox, Opera, Safari and Chrome.

Comments | Back to Layouts

play

Right - Screen split

Additional filler text

To demonstrate the effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis metus a purus tincidunt accumsan. Sed non orci felis. Vivamus eros risus, luctus vel vulputate id, vestibulum vel augue. In vulputate egestas volutpat. Donec in velit quis leo mollis porta. Suspendisse potenti. Etiam faucibus porttitor libero, in fermentum urna pulvinar quis. Sed pretium tortor nisl. Pellentesque auctor elementum urna laoreet molestie. Donec et mauris ante. Vestibulum malesuada lacinia nulla, vitae tristique erat interdum a. Suspendisse potenti. Cras magna neque, dictum at vehicula lobortis, varius eget libero. Curabitur a lectus ac nulla pharetra porttitor vel at magna. Donec neque risus, pellentesque at porta vitae.