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:
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