float: left with height: 100%

patrick h.

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

</style>
<body>

<div id="column">
auto width with full height.
</div>

</body>
</html>

Karl Smith

cl***@apoculpro.org (patrick h.) wrote:

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.
You just might get away with it (depending on the content) if you
don't mention width at all. But you explicitly set "width: auto;" - in
the absence of margins, this means "width: 100%". Given that it is
filling 100% of the available width, were is it meant to float to?

[Could someone please tell Mr Hickson that removing the requirement
for an intrinsic or specific width with floats in CSS2.1 (hiss) is a
dopey idea.]

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.
Auto width makes no sense with floats, set the width in em instead of
px if the float contains text, not an image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<style type="text/css">

</style>
<body>

<div id="column">
auto width with full height.
</div>

</body>
</html>

patrick h.

go************@kjsmith.com (Karl Smith) wrote in message news:<3d************************@posting.google.co m>...

You just might get away with it (depending on the content) if you
don't mention width at all. But you explicitly set "width: auto;" - in
the absence of margins, this means "width: 100%". Given that it is
filling 100% of the available width, were is it meant to float to?
Ah, yes. Thank you for the info -- this makes more sense now.
Auto width makes no sense with floats, set the width in em instead of
px if the float contains text, not an image.

I do believe my best course of action would be to re-dive into the
documentation to, as there are some fundamentals I obviously do not
yet fully comprehend.

Thanks again,

ph.

float: left with height: 100%

This discussion thread is closed

Similar topics