Must be a better way

**Gus Richter** · Jul 21 '05, 01:27 AM

Re: Must be a better way

David wrote:[color=blue]
> I want images down the floating left and text just beside it like a
> two column table, sounds simple right? Here is what I have come up
> with
>
> <div>
> <img style="float:le ft; /><p>text</p>
> </div>
> <div style="clear:bo th"></div><div><div>
>
> It does work and you can see an fuller example here
> http://www.hopkins81.com/views.html
>
> But do I really need that second div? Without it all turns messy but I
> feel that its unecessary, maybe its not?
>
> Cheers!!![/color]

You have an unnecessary last DIV in your example. The second-to-last is
really the first in the second group. Your example should look like this
and repeated for each group:

<div>
<img style="float:le ft; /><p>text</p>
</div>
<div style="clear:bo th"></div>

But it can be improved further!
All you need is this repeated for each section:

<div style="clear:le ft;">
<img style="float:le ft;><p>text</p>
</div>

In the first group, the clear:left does nothing, but in each
subsequent group, it instructs to clear the float.

Your <div style="clear:bo th"></div> is a hack which is usually not needed.

--
Gus

**Lauri Raittila** · Jul 21 '05, 01:27 AM

Re: Must be a better way

in comp.infosystem s.www.authoring.stylesheets, David wrote:[color=blue]
> I want images down the floating left and text just beside it like a
> two column table, sounds simple right? Here is what I have come up
> with
>
> <div>
> <img style="float:le ft; /><p>text</p>
> </div>
> <div style="clear:bo th"></div><div><div>
>
> It does work and you can see an fuller example here
> http://www.hopkins81.com/views.html
>
> But do I really need that second div? Without it all turns messy but I
> feel that its unecessary, maybe its not?[/color]

You don't need any of those divs. Unless you are using strict in case you
might need the first one...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Gus Richter** · Jul 21 '05, 01:27 AM

Re: Must be a better way

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, David wrote:
>[color=green]
>>I want images down the floating left and text just beside it like a
>>two column table, sounds simple right? Here is what I have come up
>>with
>>
>><div>
>> <img style="float:le ft; /><p>text</p>
>></div>
>><div style="clear:bo th"></div><div><div>
>>
>>It does work and you can see an fuller example here
>>http://www.hopkins81.com/views.html
>>
>>But do I really need that second div? Without it all turns messy but I
>>feel that its unecessary, maybe its not?[/color]
>
>
> You don't need any of those divs. Unless you are using strict in case you
> might need the first one...
>[/color]

I thought about telling him that the DIVs were not necessary if he was
sure that the text would extend below the images in all cases, but his
example was OK for Firefox at 800x600 but not at 1024x768 and not OK for
Opera or IE at any. Try his example. Better to be sure and use the
clear. It won't hurt.

--
Gus

**Gus Richter** · Jul 21 '05, 01:27 AM

Re: Must be a better way

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, David wrote:
>[color=green]
>>I want images down the floating left and text just beside it like a
>>two column table, sounds simple right? Here is what I have come up
>>with
>>
>><div>
>> <img style="float:le ft; /><p>text</p>
>></div>
>><div style="clear:bo th"></div><div><div>
>>
>>It does work and you can see an fuller example here
>>http://www.hopkins81.com/views.html
>>
>>But do I really need that second div? Without it all turns messy but I
>>feel that its unecessary, maybe its not?[/color]
>
>
> You don't need any of those divs. Unless you are using strict in case you
> might need the first one...
>[/color]

Oh, and I don't think that Strict has any relevance.

--
Gus

**Lauri Raittila** · Jul 21 '05, 01:27 AM

Re: Must be a better way

in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:
[color=blue]
> Oh, and I don't think that Strict has any relevance.[/color]

Of course it has, <img> directly under body is invalid.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Lauri Raittila** · Jul 21 '05, 01:27 AM

Re: Must be a better way

in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:[color=blue]
> Lauri Raittila wrote:[color=green]
> > in comp.infosystem s.www.authoring.stylesheets, David wrote:[/color][/color]
[color=blue][color=green][color=darkred]
> >><div><img style="float:le ft; /><p>text</p></div>
> >><div style="clear:bo th"></div><div><div>[/color][/color][/color]
[color=blue][color=green][color=darkred]
> >>But do I really need that second div?[/color][/color][/color]
[color=blue][color=green]
> > You don't need any of those divs. Unless you are using strict in case you
> > might need the first one...[/color][/color]
[color=blue]
> I thought about telling him that the DIVs were not necessary[/color]

My advice is buggy: "those divs" mean that second div, and one inside it.
The other sentence is an afterthought, that I wrote just before sending
the message, when I no longer remembered what my first sentence means

Anyway, it is possible to do it without divs, so my advice was not
incorrect, even if it was not good:
img {border:solid red;clear:left; }
p:after {clear:left;con tent:"";display :block;}

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**David** · Jul 21 '05, 01:27 AM

Re: Must be a better way

Great response guys, I really liked Gus' first answer as that seems to
be a lot more logical. But I could get Lauri Raittila's "no div's"
solution to work at all?

img {border:solid red;clear:left; }
p:after {clear:left;con tent:"";display :block;}

See it here

Page non trouvée – Hopkins

http://www.hopkins81.com/views.html

**Lauri Raittila** · Jul 21 '05, 01:27 AM

Re: Must be a better way

in comp.infosystem s.www.authoring.stylesheets, David wrote:[color=blue]
> Great response guys, I really liked Gus' first answer as that seems to
> be a lot more logical.[/color]

Yes. that is beast option
[color=blue]
> But I could get Lauri Raittila's "no div's"
> solution to work at all?[/color]
[color=blue]
> img {border:solid red;clear:left; }
> p:after {clear:left;con tent:"";display :block;}
>
> See it here
>
> http://www.hopkins81.com/views.html[/color]

The code was intended for s/<\/?div[^>]+>//g code, so you need also
img {float:left;}

And then you need to use it in modern eanough browser. Won't work on IE6.
Will work on Opera 6+, and in recent FF versions.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Gus Richter** · Jul 21 '05, 01:28 AM

Re: Must be a better way

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:
>
>[color=green]
>>Oh, and I don't think that Strict has any relevance.[/color]
>
>
> Of course it has, <img> directly under body is invalid.
>[/color]

This would be correct if <img> were in-line.
In this case however, since <img> is floated, it is a block.

--
Gus

**Gus Richter** · Jul 21 '05, 01:28 AM

Re: Must be a better way

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, David wrote:
>[color=green]
>>Great response guys, I really liked Gus' first answer as that seems to
>>be a lot more logical.[/color]
>
>
> Yes. that is beast option
>
>[color=green]
>>But I could get Lauri Raittila's "no div's"
>>solution to work at all?[/color]
>
>[color=green]
>>img {border:solid red;clear:left; }
>>p:after {clear:left;con tent:"";display :block;}
>>
>>See it here
>>
>>http://www.hopkins81.com/views.html[/color]
>
>
> The code was intended for s/<\/?div[^>]+>//g code, so you need also
> img {float:left;}
>
> And then you need to use it in modern eanough browser. Won't work on IE6.
> Will work on Opera 6+, and in recent FF versions.
>[/color]

This method works fine.
Now, what the heck is: s/<\/?div[^>]+>//g code ??

--
Gus

**Lauri Raittila** · Jul 21 '05, 01:28 AM

Re: Must be a better way

in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:[color=blue]
> Lauri Raittila wrote:[color=green]
> > in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:[/color][/color]
[color=blue][color=green][color=darkred]
> >>Oh, and I don't think that Strict has any relevance.[/color][/color][/color]
[color=blue][color=green]
> > Of course it has, <img> directly under body is invalid.[/color][/color]
[color=blue]
> This would be correct if <img> were in-line.
> In this case however, since <img> is floated, it is a block.[/color]

That is irrelevant. HTML validator don't care, and should not care about
CSS, same even if it was floated using HTML. And of course it makes no
difference in browsers.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Lauri Raittila** · Jul 21 '05, 01:28 AM

Re: Must be a better way

in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:
[color=blue]
> Now, what the heck is: s/<\/?div[^>]+>//g code ??[/color]

Any code with div tags removed... Exept that there is mistake, it should
be s/<\/?div ?[^>]*>//g

Google for RegEx.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Gus Richter** · Jul 21 '05, 01:28 AM

Re: Must be a better way

Lauri Raittila wrote:[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:
>[color=green]
>>Lauri Raittila wrote:
>>[color=darkred]
>>>in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:[/color][/color]
>
>[color=green][color=darkred]
>>>>Oh, and I don't think that Strict has any relevance.[/color][/color]
>
>[color=green][color=darkred]
>>>Of course it has, <img> directly under body is invalid.[/color][/color]
>
>[color=green]
>>This would be correct if <img> were in-line.
>>In this case however, since <img> is floated, it is a block.[/color]
>
>
> That is irrelevant. HTML validator don't care, and should not care about
> CSS,[/color]

I believe that you are completely wrong here.

A Validator is an application which cannot conceivably take into account
all eventualities and nuances. It is not perfect and has defects as does
any piece of software. I have not passed it through a Validator to see
how it would react. In either case, although a good tool, the bible is
still the Specification, from which I have extracted:

HTML 4.01 DTD specifies that <body> content may only be %block entity.
[ Actually, (%block; | SCRIPT)+ +(INS | DEL) ]

The %block entity defines the permissable content type to be block.
Generally, block-level elements may contain inline elements and other
block-level elements. Generally, block-level elements begin on new
lines. CSS may be used to specify whether an element is to be rendered
as block or inline.
[color=blue]
> same even if it was floated using HTML.[/color]

How would you "float" in HTML? Using the deprecated "align" attribute?
[color=blue]
> And of course it makes no difference in browsers.[/color]

I have no idea what you mean by this.

--
Gus

**Barbara de Zoete** · Jul 21 '05, 01:28 AM

Re: Must be a better way

On Fri, 18 Mar 2005 13:26:32 -0500, Gus Richter <gusrichter@net scape.net> wrote:
[color=blue]
> Lauri Raittila wrote:[color=green]
>> in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:
>>[color=darkred]
>>> Lauri Raittila wrote:
>>>
>>>> in comp.infosystem s.www.authoring.stylesheets, Gus Richter wrote:[/color]
>>[color=darkred]
>>>>> Oh, and I don't think that Strict has any relevance.[/color]
>>[color=darkred]
>>>> Of course it has, <img> directly under body is invalid.[/color]
>>[color=darkred]
>>> This would be correct if <img> were in-line.
>>> In this case however, since <img> is floated, it is a block.[/color]
>> That is irrelevant. HTML validator don't care, and should not care about
>> CSS,[/color]
>
> I believe that you are completely wrong here.
>
> A Validator is an application which cannot conceivably take into account all
> eventualities and nuances. It is not perfect and has defects as does any piece
> of software. I have not passed it through a Validator to see how it would
> react. In either case, although a good tool, the bible is still the
> Specification, from which I have extracted:
>
> HTML 4.01 DTD specifies that <body> content may only be %block entity.
> [ Actually, (%block; | SCRIPT)+ +(INS | DEL) ]
>
> The %block entity defines the permissable content type to be block.
> Generally, block-level elements may contain inline elements and other
> block-level elements. Generally, block-level elements begin on new
> lines. CSS may be used to specify whether an element is to be rendered
> as block or inline.
>[/color]

'_is_to_be_rend ered_as_block_' doesn't make an inline element a block element.
It can be styled to behave as such, but structurally remains an inline element.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

Must be a better way

Must be a better way

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment