Skip to main content

Liquid resizing page elements

Many times I am told that using tables to layout a web page is a sin.  But, when I try to resize a DIV, it's hard to get it to resize when the window has been resized.  Setting 100% does not seem to work.

So far we have the 3 column liquid layout, but it is not enough when the web pages (or applications for that matter) are more complicated.  When searching on the Internet to resize a DIV in response to a window resize, I am mostly presented with JavaScript solutions. Yeuch.

This is not very accessible for users of other browsers. Luckily, there is an undocumented feature of CSS that helps with this: table layout.

Firstly, create the element in the HTML:

<div id="pageBlock">Content comes in here...</div>

And then in the CSS we set our display:

#pageBlock {
  display: table;
  height:100%;
  width: 100%;
  table-layout: fixed;
}


Although this works with Firefox, it still likes to show a scrollbar for some reason, so you add the following to your CSS, to hide it:

body {
  overflow: hidden;
}


There you go.  This DIV will resize to according to what the browser window size is set to.  To try this out copy and paste the coding from below:


<html>
    <head>
        <title>Resizing Div</title>
    </head>
    <style type="text/css">
        body {
            /* Firefox tends to show the scrollbar without reason
             * so this command hides the scrollbar.  Doesn't matter
             * with IE */
            overflow:hidden;
           
            /* Set the font */
            font-family: Arial, Helvetica;
            font-size:10pt;
        }
        #pageBlock {
            /* Set the presentation style */
            background-color: #ffffe0;
            border:1px solid #add8e6;
       
            /* Produce the liquid layout for the DIV */
            display: table;
            height: 100%;
            width: 100%;
            table-layout:fixed;
        }
    </style>
    <body>
        <div id="pageBlock">
            <p>This DIV resizes to the window size without any JavaScript.</p>
           
            <p>Works by setting the display to table rather than block.</p>
        </div>
    </body>
</html>

Blogged with Flock

Comments

Popular posts from this blog

Open Source alternatives to Adobe Creative Suite

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money. Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour. I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase...

Download free software and help the poor

Yes, you heard me. To celebrate this festive season, SoftMaker has made their excellent alternative to Microsoft Office freely available. On top of this they will donate to charity with every download. With such a commendable act, why not contribute towards a good cause and try out an Office alternative. So head over to Load and Help ( http://www.loadandhelp.de/home-en.html ).

21 Years of the Web

Who would have thought that an independent contractor in the 1980s would have created the foundations of a revolutionary technology, which changes the way we live? It all began in the European Organisation for Nuclear Research (CERN), in Switzerland, when Tim Berners-Lee proposed and built a database of people and software models that can be shared over the Internet using the HyperText. By the end of 1990s, he created the set of elements that build a web page and its access, HTTP and HTML. In fact he also created the first browser - WorldWideWeb. The rest, you can say, is history... with a large commercial undertaking and the growth of servers across academia then the world Now, there exists well over 80 million websites and a growing user base - hundreds of millions. So it's happy 21st birthday to the Web. Celebrate good times.