DIV height 100%

[JS3der]

Does anyone know how to get an empty/not filled DIV to fill completely,
vertically, a browser screen? When I apply a height of 100% to a DIV, it
appears correctly, to fill the browser window vertically, ONLY, in both Firefox
and Netscape, but only appears as tall as the content it contains in IE. Even
when I place a clearing DIV to try and force the window vertically, it still
did not expand in IE6. The code I attached displays correctly in Firefox(1.5)
and Netscape(8.2)

In HTML : <div id="leftNav</div>

In CSS:
#leftNav {
position:absolute;
float:left;
width:210px;
height:100%;
border-left:#006699 solid 5px;
border-right:#006699 solid 1px;
background-color:#f7f8fa;
top:99px;
left:0px;
overflow:visible;
}

[Murray *ACE*]

You cannot, really.

Post by JS3der
#leftNav {
position:absolute;
float:left;

An absolutely positioned element doesn't float.

Try adding this to the CSS, though -

html, body { height:100%; }
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

Post by JS3der
Does anyone know how to get an empty/not filled DIV to fill completely,
vertically, a browser screen? When I apply a height of 100% to a DIV, it
appears correctly, to fill the browser window vertically, ONLY, in both Firefox
and Netscape, but only appears as tall as the content it contains in IE. Even
when I place a clearing DIV to try and force the window vertically, it still
did not expand in IE6. The code I attached displays correctly in Firefox(1.5)
and Netscape(8.2)
In HTML : <div id="leftNav</div>
#leftNav {
position:absolute;
float:left;
width:210px;
height:100%;
border-left:#006699 solid 5px;
border-right:#006699 solid 1px;
background-color:#f7f8fa;
top:99px;
left:0px;
overflow:visible;
}

[JS3der]

p.s. I may be mistaken but I thought that the float attribute not only 'floats'
objects, but also can be used for absolutey positioned objects, that you want
taken out of the 'normal document flow' or, for creating text flow around the
absolutley positioned DIVs.

[Murray *ACE*]

Nope. Absolute positioning already takes the element out of the flow, but
it does so COMPLETELY, rather than "partially", like the float style does.

An absolutely positioned element cannot affect the behavior or any other
layout element on the rendered page.
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

Post by JS3der
p.s. I may be mistaken but I thought that the float attribute not only 'floats'
objects, but also can be used for absolutey positioned objects, that you want
taken out of the 'normal document flow' or, for creating text flow around the
absolutley positioned DIVs.