• Making a 100% height interface

    Jun 2 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 at 12:39pm on June 13, 2007

    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 at 12:43pm on June 13, 2007

    * 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 at 1:13pm on June 13, 2007

    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 at 8:30pm on August 5, 2007

    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 at 10:11pm on August 5, 2007

    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 at 11:09am on August 16, 2007

    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 at 11:32pm on August 21, 2007

    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 at 1:17am on August 24, 2007

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

    9. Gouri at 4:22am on August 30, 2007

    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 at 8:48am on October 23, 2007

    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 at 6:45pm on February 2, 2008

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

    12. James Holk at 4:12pm on February 11, 2008

    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 at 2:36am on March 2, 2008

    Hey, thank you! This was incredibly helpful!

    14. ben at 10:07pm on March 27, 2008

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

    15. Naif Amoodi at 4:54am on May 14, 2008

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

    16. adrian at 9:51pm on June 13, 2008

    Nick you solutions works for ie6  but greaks ie7.

    17. Nick Hodge at 12:05am on June 14, 2008

    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 at 2:49am on July 18, 2008

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

    19. Achim at 6:10am on August 21, 2008

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

    20. van at 2:48am on August 27, 2008

    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 at 4:51am on October 8, 2008

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

    22. Dan Dar3 at 7:30am on October 26, 2008

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

    23. deepchand at 8:27am on November 15, 2009

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

    Once again thank u for great solution

    24. Rick at 3:05pm on March 4, 2010

    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 at 3:13pm on March 4, 2010

    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 at 9:16am on June 23, 2011

    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 at 3:26pm on October 1, 2011

    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!

    Commenting is now closed. Come find me on Twitter.