Coding with Jesse

Making a 100% height interface

June 2nd, 2007

With interfaces on the web that resemble those of the desktop (and better), we often want to get rid of the ubiquitous scroll bar in our web applications. We want all the action to happen directly within the visible browser area. Instead of scrolling, we can offer users new ways to interact with the page like Ajax-based page flipping and sliding panels.

The basis of most scroll-less 100% height interfaces contain some CSS looking like this:

html, body {
    /* get rid of default spacing on the edges */
    margin: 0;
    padding: 0;

    /* get rid of that 2px window border in Internet Explorer 6 */
    border: 0;

    /* fill the height of the browser */
    height: 100%;

    /* no more scroll bar */
    overflow: hidden;
}

This resets the margins and padding of the page, gets rid of the chrome border in IE6, sets the height to 100% of the available space, and hides anything that goes outside the 100%. This needs to happen on both the html and body elements. Having a hidden overflow isn't mandatory, but it makes sure that nothing will cause that scroll bar to pop back up, even if you are dragging things off the edge of the screen.

Now, anything you put directly into the body can also be given height: 100% and it will do exactly what you expect (fill the page). This way, you can have the interface of the page grow and shrink along with the size of the browser. You can even have multiple layers fill the page like this:

/* css */
div.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

<!-- html -->
<body>
    <div class="layer">
        .. some stuff ..
    </div>

    <div class="layer">
        .. some other stuff ..
    </div>
</body>

You can easily give an element within the page a scroll bar by throwing in overflow: auto on something that has height: 100% and some padding or margins.

We can also use JavaScript to calculate the size of the browser and use this to decide how much content we display at a time. We can do this with some relatively easy code, now that our body is the exact width and height of the browser "viewport":

function getPageSize() {
    return [
        document.body.offsetWidth,
        document.body.offsetHeight
    ];
}

Note that this code only really works with 100% height. On a page with a variable height, it's not reliable at all.

I've put this stuff to use with a lot of projects lately, most notably PictureSandbox (formerly FlickrCash).

For more details on calculating the width of the viewport, check out Viewport Properties at QuirksMode.


Comments

1 . Arvind on June 13rd, 2007

Arvind

This scroll-less, contained, liquid, 100%, layout is a much needed application of web interface standards and deserves and detailed and in-depth study. Thanks for a great summary for starters.

I began by applying your suggestions toward my needs, but I for one am stuck when it comes to certain browser issues and the rest of the web community seems to be in no better position.

In fact, my application works great in IE (except for some flashing scrollbars), but not at all in FF. Isn't the world topsy-turvey!??

Here is a link to the page in question:
http://www.breakdancingganesha.com/sources/layout/
Any help would be greatly appreciated!

Cheers and keep up the good work!
Arvind.

2 . Arvind on June 13rd, 2007

Arvind

* follow-up disclaimer *

You'll notice I've used <table>s... gasp!... to contain my header, left, main, and footer panels.

I hope this won't draw too much attention, I guess I'm old fashioned in certain ways and find it simpler to use html tables to delineate these standard application areas instead of messing with floated and positioned <div>s.

Cheers,
A.

3 . Jesse Skinner on June 13rd, 2007

Jesse Skinner

Sorry, Arvind, but I'm gonna have to use tables as a scapegoat here and say I'm not quite sure how to fix your layout.. I'm just not that familiar with the quirks of table layouts..

4 . Steve Main on August 5th, 2007

Steve Main

man i must have hit your page 30 time in the last month while trying to design my 100% width 100% height web interface with scrolling content area (Static C frame with dynamic Scrolling Porthole or SCFDSP for short) . All i wanted was a simple C frame that was static no mater how you resized the page with a scrolling content area inside the C frame. If all you want is a static height header, static width side menu, static height footer, with a scrolling dynamic content area please copy the code below and same yourself soem time. It took me almost 1 month to figure this out and now i want to share with the resorces that helped me to get there

code is as follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C Frame Porthole</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; overflow: hidden;}
#header-div {position: absolute; top: 0px; height: 40px; left:0px; right: 0px; border: 1px solid #000;}
#body-div {position: absolute; top: 40px; bottom: 30px; left: 0; right: 0;}
#body-menu-div {position: absolute; top: 0px; bottom: 0px; left: 0; width: 200px; border: 1px solid #000;}
#body-content-div {position: absolute; top: 0px; bottom: 0px; right: 0; left: 201px; border: 1px solid #000; overflow: auto;}
#footer-div {position: absolute; bottom: 0px; height: 29px; left:0px; right: 0px; border: 1px solid #000;}
</style>
</head>

<body>
<div id="header-div">This is the header container</div>
<div id="body-div">
<div id="body-menu-div">This is the navagation container</div>
<div id="body-content-div">
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
</div>
</div>
<div id="footer-div">This is the footer container</div>
</body>
</html>

5 . Steve Main on August 5th, 2007

Steve Main

Sorry forgot to add my working example please visit http://examples.caspan.com to see a working example of this use your different browsers and see how it works.

6 . Barney on August 16th, 2007

Barney

Hmm Steves example falls down if you set an element to width:100% in body-content-div. this pushes the div out to the right and as overflow set to hidden you cannot view content.

7 . Greg Helbers on August 21st, 2007

Greg Helbers

Good work, Steve.
One of your ideas has helped me to resolve a problematic layout, so thanks for your efforts, and "thanks for sharing"!!!
Greg

8 . Josh on August 24th, 2007

Josh

Great work... But it doesn't work on IE6.

9 . Gouri on August 30th, 2007

Gouri

Steve Main, i was jumped by ur solution just b4 having look it in IE6! but then need to search another solution, why you didnt check it in IE6

10 . Nick Hodge on October 23rd, 2007

Nick Hodge

After about 10hrs, i got it to work in IE6, IE7 and FF2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C frame Porthole</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {margin: 0; padding: 0; overflow: hidden;}
html, body {width: 100%; height: 100%;}
#header-div {position: absolute;width:100%; top: 0px; height: 40px; left:0px; right: 0px; border: 0px solid #000;}
#body-div {position: absolute; top: 41px;width:100%;bottom:21px; height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight -61 +'px' : body.clientHeight -61 +'px');border: 0px solid #FF0000;}
#body-content-div {position: absolute; top: 0px; bottom:0px;height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight -61 +'px' : body.clientHeight -61 +'px');width: 100%;border: 1px solid #FF0000; overflow: auto;}
#footer-div {position: absolute;width:100%; bottom: 0px; height: 20px; left:0px; border: 0px solid #000;}
</style>
</head>

<body>
<div id="header-div">This is the header container</div>
<div id="body-div">
<div id="body-content-div">
TOP<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>BOTTOM
</div></div>
<div id="footer-div">This is the footer</div>
</body>
</html>

11 . Sal on February 2nd, 2008

Sal

Great work! I love the ie fix; thanks for all your effort! But what happend to the menu/navigation area?

12 . James Holk on February 11st, 2008

James Holk

I have a seemingly subtle problem with my site, however it has already bothered multiple people in the two days it's been up.

I have a 100% height set to my page and a wrap set to my content area. This way I still get a scrolling website, but also have the 100% height feature that I'm after. The problem is with where the cursor is positioned on the page when visitors use their mouses scroll ball. If you're not in the content area or outside the web page dimensions then the page won't scroll. Look at the site for yourself to get a clearer example of what I'm saying.

Is there anyway to add a 'scroll anywhere' type command to fix this problem?

Thanks.

13 . Christiaan on March 2nd, 2008

Christiaan

Hey, thank you! This was incredibly helpful!

14 . ben on March 27th, 2008

ben

GREAT Post. I have been searching for an answer to the IE6 problem. Thank You :):)

15 . Naif Amoodi on May 14th, 2008

Naif Amoodi

My requirements are pretty complicated but I am going to give this method a try!

16 . adrian on June 13rd, 2008

adrian

Nick you solutions works for ie6 but greaks ie7.

17 . Nick Hodge on June 14th, 2008

Nick Hodge

in what ways is it freaking IE7. I just copied the code i posted into notepad and saved it as test.htm and viewed it perfectly in IE7.

I have Version: 7.0.5730.11; Update Version: 0

18 . John on July 18th, 2008

John

To fix the "scroll-problem" in IE 6 add "float:left" to the css #body-div

19 . Achim on August 21st, 2008

Achim

Hey Steve Main,
thanks a lot for the CSS! It's just saved my ass. :)

20 . van on August 27th, 2008

van

how do i overcome from inner div to outer div means i have some images when mouse over on it image go off and overlay comes so how do i solve this in IE but it works fine in FF.please help me .

21 . feha on October 8th, 2008

feha

Hi all
Nick thanks for this great solution.
How about left sidebar ?

22 . Dan Dar3 on October 26th, 2008

Dan Dar3

Thanks a lot Steve and everyone else for the solutions, just what I was looking for!!! genius!!!

23 . deepchand on November 15th, 2009

deepchand

Thanks alot Nick Hodge the solution for 100% height was too good and great...

Once again thank u for great solution

24 . Rick on March 4th, 2010

Rick

Jesse Skinner you are a genius! Seriously, I spent two weeks, probably 50 or 60 hours trying various methods to achieve what you have solved. I even tested a method you can find on the Internet labelled "the holy grail" which lets you know just how dificult this task seems to be, like the search for the Holy Grail. All of the other options that I found on the Internet said that they worked, but -none- of them worked with all browsers, there was always some flaw or glitch.
THANK YOU I am very happy and very grateful. I was actually startled when it worked because I had seen so many that did not. You can see my little work of art at:
http://altatechsolutions.com

Also, a tip for web designers, when making websites be sure that they work with IE6 and don't cop out and tell your viewers to get a newer browser. Lot's of big corporations still restrict their employees to IE6. The best way to test for multi-browser (including IE6) compatibility is with IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
it's free (give them a donation) and it works great and it runs from a USB flash/thumb drive.

25 . Jesse Skinner on March 4th, 2010

Jesse Skinner

Looks good, Rick. Glad I could have been of help :)

And I fully agree that web sites shouldn't tell visitors what browser to use. It always makes me think of that "Best viewed with Netscape" nonsense of yesteryear.

26 . Kedar on June 23rd, 2011

Kedar

Hello, This is Kedar, I am Web Designer from India,

Please check the code below:
Its working fine in all browsers



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;

}

#container {
min-height: 100%;
background-color: #ccc;
width: 676px;
}
* html #container {
height: 100%;
}

</style>

</head>

<body>
<div id="container">
<h1>100% Height Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>

<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>
</div>

</body>
</html>

27 . Erik H on October 1st, 2011

Erik H

I don't know what browser Kedar is using, probably Firefoks, Winfrey, Iksplorer or Zavari but thank you Steve and Nick, you really helped me out the css-hell!

Comments are closed, but I'd still love to hear your thoughts.