Please bear with me ... I am a newbie to DIVs.
Why does the following work in IE6, but not in NS7? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>DIV float Example</TITLE>
<style type="text/css">
<!--
div.floater {float: left}
-->
</style>
</HEAD>
<BODY>
<DIV CLASS="floater">this is a test </DIV>
<DIV CLASS="floater">the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy
dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown
fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the
lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick
brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog</DIV>
</BODY>
</HTML>
I am just starting to play with DIVs.
--
Dennis 11  4036 
Dennis wrote: Please bear with me ... I am a newbie to DIVs.
Why does the following work in IE6, but not in NS7?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
[snip code]
I am just starting to play with DIVs.
Okay, apparently, you're also starting to play with Usenet ;-)
To describe a problem, please post a URL, don't expect people to copy
and paste your code into a text editor, give it a name, upload it to
their own server, and then look what the problem is. That bit is your
work. The easier you make it for other people to help you, the more
people will want to help you.
Now, to your problem. The doctype you used, throws IE into Quirks
mode. This basically means that it will largely not follow the
standards, which the other browsers do. So, to make IE behave
correctly, use this doctype instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You will see, that IE stops doing what you want now too :-)
Now, to have two divs floated next to each other, you need to give
them a width.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
"Dennis" wrote: Please bear with me ... I am a newbie to DIVs.
Why does the following work in IE6, but not in NS7?
<style type="text/css">
<!--
div.floater {float: left}
-->
</style>
<DIV CLASS="floater">this is a test </DIV>
<DIV CLASS="floater">the quick brown fox jumped over the lazy dog the quick
brown fox jumped over the lazy dog the quick brown fox jumped over the lazy
dog the quick brown fox jumped over the lazy dog the quick brown fox jumped
Here's a tip: if you want a useful answer, try describing (a) what you
expected to happen, and (b) what actually happened. Simply saying "it
doesn't work" gets you nowhere.
Your markup is more likely to render correctly in NS7 than in IE6, but then
I have no Idea what you were trying to do in the first place.
--
phil [dot] ronan @ virgin [dot] net http://vzone.virgin.net/phil.ronan/
On Mon, 5 Sep 2005 18:51:04 +0200, Els <el*********@tiscali.nl> wrote: Okay, apparently, you're also starting to play with Usenet ;-)
Not really ... but I've posted a copy (with your revised DOCTYPE) to:
http://kowallek.myiglou.com/temp/div_float_example.html
So, to make IE behave
correctly, use this doctype instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You will see, that IE stops doing what you want now too :-)
Unless I pasted it in wrong, it doesn't appear to have made a difference.
Now, to have two divs floated next to each other, you need to give
them a width.
That is no doubt the answer to my question. But what if I want the width of
the 1st column to be just as wide as whatever text it contains? Leaving off
the width in IE seems to work ... but not for NS.
Feel free to point me to a good tutorial if you would rather.
P.S. What I want to do is rewrite a program that generates HTML. The old
program lines everything up using TABLEs. I would like to use DIVs instead.
Thanks for your help.
--
Dennis
Dennis wrote: Please bear with me ... I am a newbie to DIVs.
Why does the following [float] work in IE6, but not in NS7?
1. Because IE is more broken than the Bush government's flood defence
policy.
2. Because you haven't bothered to read the docs on CSS, which are on
the web, free and have been around something like 8 years. http://www.w3.org/TR/1998/REC-CSS2-1...#propdef-float
"A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced elements)."
So set their width, then they'll float.
Dennis wrote: On Mon, 5 Sep 2005 18:51:04 +0200, Els <el*********@tiscali.nl> wrote:
Okay, apparently, you're also starting to play with Usenet ;-)
Not really ... but I've posted a copy (with your revised DOCTYPE) to:
http://kowallek.myiglou.com/temp/div_float_example.html
So, to make IE behave
correctly, use this doctype instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
You will see, that IE stops doing what you want now too :-)
Unless I pasted it in wrong, it doesn't appear to have made a difference.
No, you didn't paste it in wrong. I just figured this would be one of
the areas where IE's quirksmode is different from its standards mode.
Apparently not :-)
Still best use this doctype though! It makes IE behave in lots of
other situations.
Now, to have two divs floated next to each other, you need to give
them a width.
That is no doubt the answer to my question. But what if I want the width of
the 1st column to be just as wide as whatever text it contains? Leaving off
the width in IE seems to work ... but not for NS.
Add this line
border:1px solid red;
to the styles, and see what is happening in other browsers than IE.
It does what you want, but the text in the second div has no width
limit.
Practical: you need to set a width. Either on both divs, or just on
the first one, and give the second one a margin-left as wide as the
width of the first one. You'll need to take the float off the second
one too if you use that approach. Also, if you do it in ems, the size
of that first div, and the margin-width on the second one, will grow
and shrink with the font-size.
Feel free to point me to a good tutorial if you would rather.
I don't really have a personal advice, as I just used the specs and
alt.html's regulars' knowledge to learn CSS, but here's a list of
information:
http://locusmeus.com/html-css/list.html
P.S. What I want to do is rewrite a program that generates HTML. The old
program lines everything up using TABLEs. I would like to use DIVs instead.
Good choice, and eh.. good luck ;-)
Thanks for your help.
You're welcome :-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
On Mon, 5 Sep 2005 19:48:34 +0200, Els <el*********@tiscali.nl> wrote: the text in the second div has no width limit.
Hmmmmmm...
Adding a width to the just the 2nd DIV gives me what I want (sort of). ;-)
Thanks for your pointers. I'll give them a try and do some more experimenting.
--
Dennis di*****@codesmiths.com wrote:
2. Because you haven't bothered to read the docs on CSS, which are on
the web, free and have been around something like 8 years.
http://www.w3.org/TR/1998/REC-CSS2-1...#propdef-float
"A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced elements)."
FYI, that's from the CSS 2.0 spec. CSS 2.1 does not have this
requirement, and allows browsers to "shrink-wrap" content as they see
fit. MacIE follows the CSS 2.0 spec, but most other CSS-capable browsers
follow 2.1.
That doesn't mean that various browsers will give comparable results
when a width isn't specified, of course. ;) Best practice is still to
set an explicit width.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
JRS: In article <1g***************@locusmeus.com>, dated Mon, 5 Sep
2005 18:51:04, seen in news:comp.infosystems. www.authoring.html, Els
<el*********@tiscali.nl> posted :
To describe a problem, please post a URL, don't expect people to copy
and paste your code into a text editor, give it a name, upload it to
their own server, and then look what the problem is. That bit is your
work. The easier you make it for other people to help you, the more
people will want to help you.
Some people read (i.e. with the eyeballs) news on-line, and so have
immediate access to a URL.
Some people read (ditto) News off-line, and so do not have immediate
access to a URL. For these, it is helpful to see the code (if short)
and a description of the problem within the News article. That may be
sufficient to enable a proper answer; it should be enough to support a
reasoned decision on whether one will later visit the URL.
Asking for URL : good ; asking for no code : bad.
Actually, there's no need to do as much as you suggest - your "text
editor ... server" can be omitted, in general.
I just copy'n'pasted the code into my local copy of <URL: http://www.merl
yn.demon.co.uk/js-quick.htm>, [removed the quotemarks which the author
should not have posted, ] and actuated the HTML button. Feel free to
take a copy of the page, but not to use the cited URL repeatedly.
--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Dennis wrote:
Adding a width to the just the 2nd DIV gives me what I want (sort of). ;-)
Some basics of Float: A float is out of the normal flow, so its width,
if not specified, is the full width of the viewport.
In the (original) example, there are two divs with both floated left.
Since the second div takes the viewport's width, it does not fit in the
remaining line left by the first div, and it moves to where it will fit
- the next line down.
If you apply a width to the 2nd div, it will function as you wish, but
will not automatically extend to the extreme right of the viewport, as I
surmise you wish it to behave.
In order to take on this behavior, set it up as follows:
div.floater {float: left}
<div class="floater">this is a test </div>
<p>............</p>
This causes the paragraph to be flowed around (shrink-wrapped) the
floated div. The width of the Paragraph is not specified and thusly
extends to the right of the viewport and is suitable for a fluid layout.
Now, in order to _not_ have the shrink-wrapping effect, but achieve the
same as IE presented you with in your original example, you must apply a
left margin to the Paragraph, like so:
div.floater {float: left}
.special {margin-left:100px;}
<div class="floater">this is a test </div>
<p class="special">............</p>
This works equally well for Gecko and IE.
N.B. IE does not follow the specs. Test with any Gecko based browser
(Firefox, NS7, etc. and *then* check to see how IE reacts.
--
Gus
Gus Richter wrote: Dennis wrote:
Adding a width to the just the 2nd DIV gives me what I want (sort of). ;-)
[snip valid information]
Now, in order to _not_ have the shrink-wrapping effect, but achieve the
same as IE presented you with in your original example, you must apply a
left margin to the Paragraph, like so:
div.floater {float: left}
.special {margin-left:100px;}
<div class="floater">this is a test </div>
<p class="special">............</p>
[snip]
All true, as I already wrote (not as extensively though) in my
previous post to the OP. The thing is that he doesn't want to set the
width of the first div, hence, he can't set a suitable width as the
left-margin of the second one.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els wrote:
All true, as I already wrote (not as extensively though) in my
previous post to the OP.
Just attempting to provide greater understanding of float. I agree that
with the absence of an inherent width, as with an image, a width must be
provided for one of the divs.
The thing is that he doesn't want to set the
width of the first div, hence, he can't set a suitable width as the
left-margin of the second one.
If the first div consists of only short one-liners of variable width, I
would guess that he can make a reasonable estimate of the maximum width
required and use that as a margin-left value.
In the event that the first div could be rather long, he could
interchange the two divs and use float:right; instead, like so:
div.floater {float: right; width:600px;}
<div class="floater">............</div>
<div>this is a test </div>
In this example, the first div containing the large text content, is
floated right with a declared width and the 2nd div, with
variable/unknown width is non-floated. The 2nd div is caused to be
flexible and flows around the left side (shrink-wrapped) of the floated
1st div with line wrapping within its available width.
Since it is most likely that the 2nd div will have a smaller height than
the 1st div, the subsequent element will need clear:right; to be
applied. In the event that it is greater, it will not interfere.
--
Gus This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Code4u |
last post by:
In the course of writing numerical code I needed to convert a float to
an int with a defined behavior: if the float is great than INT_MAX,
set the int to INT_MAX, otherwise assign directly. The...
|
by: Christian Christmann |
last post by:
Hi,
just a general question.
Which data type is more precise for large values:
float or double?
Thank you.
Chris
|
by: Kay Schluehr |
last post by:
I wonder why this expression works:
>>> decimal.Decimal("5.5")**1024
Decimal("1.353299876254915295189966576E+758")
but this one causes an error
5.5**1024
Traceback (most recent call...
|
by: bofh1234 |
last post by:
I am trying to write a function that returns a float. This is what the
function should do: It takes the socket number and a variable name.
The function looks up the variable in an array of...
|
by: avsrk |
last post by:
Hello Folks ,
General C data types question , more geared up towards embedded folks .
I have a positive float quantity with a fractional part (one decimal
point) which occupies
4 bytes ....
|
by: Partho |
last post by:
I have a float variable which I need to add to a short variable. How do
I do this? Do I have to typecast or is there a way around? I tried
typecasting the float to a short, but that gives me a 0 or...
|
by: hantechs |
last post by:
<html>
<body>
<p style="width:30%;">text1</p>
<p style="float:left;">text2</p>
</body>
</html>
The effect of this html code is : text1 and text2 each is on a line.
My question is: Why text2...
|
by: Shirsoft |
last post by:
I have a 32 bit intel and 64 bit AMD machine. There is a rounding
error in the 8th digit. Unfortunately because of the algorithm we use,
the errors percolate into higher digits.
C++ code is...
|
by: Bill Reid |
last post by:
I just noticed that my "improved" version of sscanf() doesn't assign
floating point numbers properly if the variable assigned to is declared
as a "float" rather than a "double". (This never...
|
by: Timothy Grant |
last post by:
That's because s IS a string. It's not been converted to a float.
In : s = '3.1415'
In : n = float(s)
In : type(s)
Out: <type 'str'>
In : type(n)
Out: <type 'float'>
Why are you avoiding...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
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...
| |
