250 px wide
5%This width is 90% of total width.5%
20%40%60%80%100%
LEFT COLUMN
250 pixel wide. 		This little page is a simple challenge to be solved using divisions ONLY.
Run this page following the instructions, and note the details.
The challenge:
Write the code using ONLY <div> to obtain exactly the same results on all major browsers and without using any HTML or CSS "patches", multiple CSS or conditional statements!
The page must be 90% of the screen width and centered.
The resulting code must work correctly on IE, Firefox, Opera, Chrome and Safari to be valid.
Now, before starting the show, using the top ruler as reference (each "|" is 100 pixel wide), use your browser resize button to get down to 1024px wide (the last "|"), then 800 wide and check that the footer follows correctly.

While reducing the width, a horizontal scroll bar will appear: it is due to the ruler on top, a fixed image (a 1024 x 5 px image), but the edges of our page will be fitting exactly the screen width.
We will remove that image on the first call to kill the unwanted scroll bar.

Our main area will be divided in three columns:
Left column 250px wide, Right column 20% of the page width, and center area fills the rest.

The ruler in the header shows the 250px wide (red), and alternated green and blue show the 20%.

Challenge 1
By clicking the button, we want to:
1. Remove the top ruler. The horizontal scroll bar must disappear.
2. Load the left column with a long lorem ipsum: column must NOT widen.
3. The footer must go lower, but be against the bottom of the left column.
4. The center and right columns must expand vertically to rejoin the footer.
5. The center zone will be loaded with the next challenge.
6. Each of the three main areas must have their contents aligned to the top.
7. Of course, we do NOT REFRESH THE PAGE AT ANY TIME!

Easy?
Fine! Let's see...

Download the Zip source files with all images

 RIGHT COLUMN,
20% of the page width (or 20% of 90%!)