473,320 Members | 2,177 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

float: left with height: 100%

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
2 22967
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Gustav Medler | last post by:
Css only offers float:right; and float:left; Is it possible, to center an image, floated around by text? Cross browser funcionality is needed for NS4.7, IE 5.x, Op 6.x, Moz 1.x, Konqu 3.x. I...
3
by: Günther Stößl | last post by:
Hello I am trying to position two floats inside a table column. <td> <div style="position:relative; width:100%"> <div style="position:absolute; left:0px; width:60%>... </div> <div...
2
by: mike | last post by:
Hello, What I would like is to float some text around the image where the text starts align on the left or right of the image aligned to the top of the image and then wrap around the image. I have...
2
by: Dr. Richard E. Hawkins | last post by:
I've googled around, and asked everyone I know, but I still can't find any reference to anyone else having faced this particular IE bug with floats. I've put a page at...
7
by: alex.krupp | last post by:
I have this webpage where I am getting the dreaded float drop bug in IE. I tried everything in the float drop FAQs online, but nothing can get it working. I have narrowed down the problem though....
3
by: inkswamp | last post by:
I've been using CSS for quite a while now but I have yet to master its eccentricities. Here's something I recently ran across and if someone could explain why this happens, I would appreciate it. ...
14
by: Mark | last post by:
please view http://mnbayazit.com/misc/sample.gif i'm wondering how i can make the sidebar (green) float to the right of the main text, without specifying the width of the main content (because...
2
by: Gallarpri | last post by:
Hi all! I am having trouble with a float:left div, trying to making his height 100%. You can see it in http://www.josegallardo.net/googlegroups/listaforosFF.htm I want that <div...
27
by: GloStix | last post by:
WARNING VIDEO TAKES A WHILE TO LOAD http://screencast.com/t/BWQ6DNtsM I really don't know how to fix this other than putting another div. But I dont' exactly want to do that for every page....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.