Greetings,
I am encountering some issues regarding using float while desiring to
set the height to 100%. This is likely due to my own misunderstandin g
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> 2 22992 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> go************@ kjsmith.com (Karl Smith) wrote in message news:<3d******* *************** **@posting.goog le.com>... 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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 did try
<div style="width:120px; float:left;">
<img src="schloss.jpg" width="88" height="100">
what did work for :left and for :right margin with floating text around.
|
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 style="float:right; width:30%></div>
</div></td>
|
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 tried using the .imgright
{float: right;} or .imgleft {float: left;} in my draft css. I have looked at
other suggestion on the net by using a span class but I am having problems
adding it to my <div class="contpara" now such luck.
Here is my...
|
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 http://dochawk.org/sample.html . This was made by
stripping out the google ads from the regular pages. It validates as
strict 4.01 at http://validator.w3.org. (The google ads drive it nuts!)
The main (right) column is made with alternating left and right floats
to...
|
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. For some
reason the left menu is 195px in IE instead of the 175 specified,
meaning that box divs are wider than the div they are contained in so
the right one drops. However, I can't figure out how to make the left
div equal to only 175px in IE....
| |
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.
I've included code below. The code produces three divs, each with
height set to "auto." Within each div is an image. If I float the image
left or right, the height of the box does not accommodate the height of
the image automatically. If I don't...
|
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 the sidebar is optional, i need the main content to fill the
space available). ie, the green sidebar should be right up against the
red header.
code below
|
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 class="foro_linea_celda3">438</divoccupy all his
possible height. I have tried height:100%, but I think it doesn't work
due to its a float div :S
|
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. random div's everywhere
Is there any other way?
Also I'm trying to get a scaled thumbnail of the orginal picture WHILE maintaining the size of the css box.. Is that possible? Or do I have to scale it in Photoshop and make a separate image =\
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |