Greetings,
I am encountering some issues regarding using float while desiring to
set the height to 100%. This is likely due to my own misunderstanding
of the way things actually function -- any guidance would be
appreciated.
To summarize, I would like to have a variable-width, 100% height,
left-floating column. However, it seems as though with
Mozilla/Netscape that height: 100% is not interpreted as I would
expect unless the width is set to a fixed value.
A simple example of what I thought would work is below. Except that
the height ends up looking like height: auto rather than height: 100%.
The only way I could get the height: 100% was to set width to, for
example, width: 120px. Of course, this nullifies the variable width
property I desire.
Could anyone explain what may be going on (perhaps something to do
with the float removing the object from the normal flow of the
document...) and/or provide any suggestions as to what a solution may
be?
Thanks.
--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<style type="text/css">
<!--
body, html {
height: 100%;
}
#column {
height: 100%;
width: auto;
float: left;
border: 1px solid black;
background: #eee;
}
-->
</style>
<body>
<div id="column">
auto width with full height.
</div>
</body>
</html>
