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

Labels:

Comments

Post a Comment

Popular posts from this blog

Will we ever get Dreamweaver on Linux?

I have been a keen user of Ubuntu for some time now, and have to admit that this distribution has improved by leaps and bounds. However, what I do honestly miss on windows is... Dreamweaver. Some will swear by it, some will swear at the mention of its name. But for me, it is a very powerful tool when used correctly. Such a very popular and powerful web design and development tool is available on Windows and Mac OS, but not Linux. If you would just consider, Adobe has already supported the platform with their Adobe Reader and Adobe Air. Why is Dreamweaver not available? It just seems that there's not such a huge call for it so they just don't see the need to put in an effort for another platform. One chap at Adobe suggested to use Dreameaver under wine , but it doesn't work so great. There is an alternative to wine which, according to a user on the forums, works flawlessly - Crossover . However, the former option is not free, so some may be dissuaded where they woul...
Post a Comment
Read more

Image links in IE8

While mocking up a design page for a colleague's website I came across a new browser behaviour in IE8. This was the first time I used IE8 as my main development browser, due to the fact that the PC was re-installed and high-priority updates were applied. Surprisingly Microsoft branded IE8 as a priority update. Anyway, back to what I was talking about, here's a sample: <a href="index.htm"><img src="logo2.jpg" alt="Logo" title="Logo" /></a> As you can tell, this is using an image for a link, where it behaves well in Chrome, Firefox and in the previous versions of IE (7 and older). But in IE8, this is not the case as the DOM does not treat the image as innerText, only as a child node. As a result, everytime I hover the mouse over this image, an extra gap would come from nowhere shifting any relatively positioned elements. To fix this I explicitly added a space (&nbsp;), so the line would look like: <a href="inde...
3 comments
Read more

Morange

I have Nokia N70 on the T-Mobile network, and it's really impressive. Labelled as a Smart Phone, it is a bit like a cross between a PDA and a normal mobile phone. Boy does it live to expectations. You can check your emails (POP/IMAP), read Word documents, Spreadsheets, view To-Do lists and so much more. Now I sound like a sales man. The most handy aspect is the ability of downloading "mini-applications". What I really want to talk about is a mini-application that let's you treat your phone as if it is an iPhone. Yes, you heard me. An iPhone. Why bother with a mobile phone that costs you an arm and a leg for a phone with a pretty interface. Well, I would, but I would not like to risk my limbs in the process. This application is called Morange ( http://www.morange.com ) and is feature rich. You can receive an "push" POP/IMAP emails. It even works with GMail. All you have to do is enable POP3 in the settings (Follow this link to find out how http://ma...
2 comments
Read more