DIV float question...

Please bear with me ... I am a newbie to DIVs.

Why does the following work in IE6, but not in NS7?
[color=blue]
><!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">
> 
> </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>[/color]

I am just starting to play with DIVs.

--

Dennis

Dennis wrote:
[color=blue]
> Please bear with me ... I am a newbie to DIVs.
>
> Why does the following work in IE6, but not in NS7?
>[color=green]
>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">[/color][/color]

[snip code]
[color=blue]
> I am just starting to play with DIVs.[/color]

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:
[color=blue]
> Please bear with me ... I am a newbie to DIVs.
>
> Why does the following work in IE6, but not in NS7?
>[color=green]
>> <style type="text/css">
>> 
>> </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[/color][/color]

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 <els.aNOSPAM@tiscali.nl> wrote:
[color=blue]
>Okay, apparently, you're also starting to play with Usenet ;-)[/color]

Not really ... but I've posted a copy (with your revised DOCTYPE) to:

http://kowallek.myiglou.com/temp/div_float_example.html
[color=blue]
>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">[/color]
[color=blue]
>You will see, that IE stops doing what you want now too :-)[/color]

Unless I pasted it in wrong, it doesn't appear to have made a difference.
[color=blue]
>Now, to have two divs floated next to each other, you need to give
>them a width.[/color]

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:[color=blue]
> Please bear with me ... I am a newbie to DIVs.
>
> Why does the following [float] work in IE6, but not in NS7?[/color]

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:
[color=blue]
> On Mon, 5 Sep 2005 18:51:04 +0200, Els <els.aNOSPAM@tiscali.nl> wrote:
>[color=green]
>>Okay, apparently, you're also starting to play with Usenet ;-)[/color]
>
> Not really ... but I've posted a copy (with your revised DOCTYPE) to:
>
> http://kowallek.myiglou.com/temp/div_float_example.html
>[color=green]
>>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">[/color]
>[color=green]
>>You will see, that IE stops doing what you want now too :-)[/color]
>
> Unless I pasted it in wrong, it doesn't appear to have made a difference.[/color]

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.
[color=blue][color=green]
>>Now, to have two divs floated next to each other, you need to give
>>them a width.[/color]
>
> 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.[/color]

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.
[color=blue]
> Feel free to point me to a good tutorial if you would rather.[/color]

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
[color=blue]
> 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.[/color]

Good choice, and eh.. good luck ;-)
[color=blue]
> Thanks for your help.[/color]

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 <els.aNOSPAM@tiscali.nl> wrote:
[color=blue]
>the text in the second div has no width limit.[/color]

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

dingbat@codesmiths.com wrote:[color=blue]
>
> 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)."[/color]

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 <1gk7h85shclqh.dlg@locusmeus.com>, dated Mon, 5 Sep
2005 18:51:04, seen in news:comp.infosystems.www.authoring.html, Els
<els.aNOSPAM@tiscali.nl> posted :[color=blue]
>
>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.[/color]

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:[color=blue]
>
> Adding a width to the just the 2nd DIV gives me what I want (sort of). ;-)[/color]

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:
[color=blue]
> Dennis wrote:[color=green]
>>
>> Adding a width to the just the 2nd DIV gives me what I want (sort of). ;-)[/color][/color]

[snip valid information]
[color=blue]
> 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>[/color]

[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:[color=blue]
>
> All true, as I already wrote (not as extensively though) in my
> previous post to the OP.[/color]

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.
[color=blue]
> 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.[/color]

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

DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

re: DIV float question...

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about