the deal with my div

hey all,
i have a plain and simple div on my page and all i've done was change the
background color to fuchsia, made the height and width 95%.
how come the div will expand width-wise the full 95% and not the height?
thanks,
rodcharHeights are a tricky thing, they tend to do what they wish depending on the
browser. Part of it is the way the browser interprets the page. If it
decides that the content of the page only fills 40%, you may end up with a
div that fills 95% of the 40%. A lot of it is the interpretation of heights
as in the HTML W3C specs. To say the least, height attributes are often the
bastard child and aren't treated with the same respect in the standards as
widths are.
Hope this helps,
Mark Fitzpatrick
Former Microsoft FrontPage MVP 199...2006
"rodchar" <rodchar@dotnet.itags.org.discussions.microsoft.com> wrote in message
news:A7B544A3-A77E-4BA2-89BC-E5D5A259117C@dotnet.itags.org.microsoft.com...
> hey all,
> i have a plain and simple div on my page and all i've done was change the
> background color to fuchsia, made the height and width 95%.
> how come the div will expand width-wise the full 95% and not the height?
> thanks,
> rodchar
Hi,
rodchar wrote:
> hey all,
> i have a plain and simple div on my page and all i've done was change the
> background color to fuchsia, made the height and width 95%.
> how come the div will expand width-wise the full 95% and not the height?
> thanks,
> rodchar
Try setting the form's height to 100%. In some browsers the form is
considered as a rendered element, with a height and a width.
Should that fail, consider including your DIV in a one-celled table,
with a 100% width and height.
HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Percentage values are based on the parent. The body height is only as high a
s
it needs to be, not as high as the browser's window. You'd need to add in
some javascript to read the browser window's height and then compute the
height of the div to be 95% of that value. The same is technically true of
the width value also, but the body's width defaults to the browser window's
width. So the div's parent element (document.body) just happens to be the
whole width of the browser.
"rodchar" wrote:

> hey all,
> i have a plain and simple div on my page and all i've done was change the
> background color to fuchsia, made the height and width 95%.
> how come the div will expand width-wise the full 95% and not the height?
> thanks,
> rodchar
Please, for the love of CSS, don't use a table to do page layout.
"Laurent Bugnion" wrote:

> Hi,
> rodchar wrote:
> Try setting the form's height to 100%. In some browsers the form is
> considered as a rendered element, with a height and a width.
> Should that fail, consider including your DIV in a one-celled table,
> with a 100% width and height.
> HTH,
> Laurent
> --
> Laurent Bugnion, GalaSoft
> Software engineering: http://www.galasoft-LB.ch
> PhotoAlbum: http://www.galasoft-LB.ch/pictures
> Support children in Calcutta: http://www.calcutta-espoir.ch
>
Hi,
Jason Stearns wrote:
> Percentage values are based on the parent. The body height is only as high
as
> it needs to be, not as high as the browser's window. You'd need to add in
> some javascript to read the browser window's height and then compute the
> height of the div to be 95% of that value. The same is technically true of
> the width value also, but the body's width defaults to the browser window'
s
> width. So the div's parent element (document.body) just happens to be the
> whole width of the browser.
I fail to see why it's better to use JavaScript rather than a table to
do that.
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
Its not what tables were meant for. Tables are meant for displaying tabluar
data. Yes it would solve this problem just as a screwdriver could be used as
a pry bar.
Using tables for page layout can cause other problems though, like CSS
styles not cascading down into the table and it could become cumbersome for
page readers for the deaf to have to read down into the <table> then the <tr
>
then the <td> just to get to the content.
Its just not how HTML was designed. But it would work, yes.
"Laurent Bugnion" wrote:

> Hi,
> Jason Stearns wrote:
> I fail to see why it's better to use JavaScript rather than a table to
> do that.
> Laurent
> --
> Laurent Bugnion, GalaSoft
> Software engineering: http://www.galasoft-LB.ch
> PhotoAlbum: http://www.galasoft-LB.ch/pictures
> Support children in Calcutta: http://www.calcutta-espoir.ch
>
Hi,
Jason Stearns wrote:
> Its not what tables were meant for. Tables are meant for displaying tablua
r
> data. Yes it would solve this problem just as a screwdriver could be used
as
> a pry bar.
> Using tables for page layout can cause other problems though, like CSS
> styles not cascading down into the table and it could become cumbersome fo
r
> page readers for the deaf to have to read down into the <table> then the <
tr>
> then the <td> just to get to the content.
> Its just not how HTML was designed. But it would work, yes.
I agree. But getting the window's size with JavaScript is also a bad
tool. Out of two bad tools, I prefer the one which works also without
JavaScript ;-)
Just my opinion, of course.
BTW, in IE, setting the height of the body to 100% solves the problem.
In Firefox it doesn't (at least not on Windows).
Greetings,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch
> I agree. But getting the window's size with JavaScript is also a bad tool.
How so? Seems that Javascript is the more applicable tool for this.
Even with tables, 100% height isn't technically a standard (even though some
browsers do support it).
Personally, I'd just give the DIV a specific height and live with it. I try
to avoid worrying about how tall the viewport is...let the page be as long
as it needs to be.
-Darrel
Good point. I do generally focus on Firefox first, then tweak for IE.
Something i just tried and it worked ok in both FF2.0 and IE6 is
<HEAD>
<style>
BODY
{
min-height:100%;
}
</style>
</HEAD>
<BODY>
<div style="height:100%; border:black solid 1px;">
TEST
</div>
</BODY>
"Laurent Bugnion" wrote:

> Hi,
> Jason Stearns wrote:
> I agree. But getting the window's size with JavaScript is also a bad
> tool. Out of two bad tools, I prefer the one which works also without
> JavaScript ;-)
> Just my opinion, of course.
> BTW, in IE, setting the height of the body to 100% solves the problem.
> In Firefox it doesn't (at least not on Windows).
> Greetings,
> Laurent
> --
> Laurent Bugnion, GalaSoft
> Software engineering: http://www.galasoft-LB.ch
> PhotoAlbum: http://www.galasoft-LB.ch/pictures
> Support children in Calcutta: http://www.calcutta-espoir.ch
>