By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

float: left with height: 100%

P: n/a
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>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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">
<!--

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>

Jul 20 '05 #2

P: n/a
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.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.