Bookmarks

Yahoo Gmail Google Facebook Delicious Twitter Reddit Stumpleupon Myspace Digg

Search queries

nrao wwwxxx, xxxxxdup, procmail change subject header, wwwXxx not20, Wwwxxx.doks sas, linux raid resync after reboot, bind-address mysql multiple, sanibleone xxxx, ftp://192.168.100.100/, www.xxxcon

Links

XODOX
Impressum

#1: div-float

Posted on 2008-04-22 19:09:26 by artev

if I have 6 divs,
div1 div2 div3 div4 div5 div6

if I use float:left for all, the divs are all near in one row.

how can to have put side by side in two rows;
i.e. first 3 near and other 3 near but below;
notice: I not want use other div for group first 3; but want use the style;


I tested with insertion on div4 the clear:left;
div4 ok I have in 2nd row but is all expanse and not have near the div5 and
div6.
howcan resolve?

------------------------------------------------

other: for to have
<div>
div1 div2 div3
</div>

three div near using the float and one external div that contain
all, is possible?
ask because with float of div1 div2 div3 the external div not work good

Report this message

#2: Re: div-float

Posted on 2008-04-22 21:15:41 by Neredbojias

On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:

> if I have 6 divs,
> div1 div2 div3 div4 div5 div6
>
> if I use float:left for all, the divs are all near in one row.
>
> how can to have put side by side in two rows;
> i.e. first 3 near and other 3 near but below;
> notice: I not want use other div for group first 3; but want use the
> style;
>
>
> I tested with insertion on div4 the clear:left;
> div4 ok I have in 2nd row but is all expanse and not have near the
> div5 and div6.
> howcan resolve?
>
> ------------------------------------------------
>
> other: for to have
> <div>
> div1 div2 div3
> </div>
>
> three div near using the float and one external div that contain
> all, is possible?
> ask because with float of div1 div2 div3 the external div not work
> good

Try this:

<div>
div1 div2 div3
</div>
<div style="clear:both;">
div4 div5 div6
</div>

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Report this message

#3: Re: div-float

Posted on 2008-04-22 22:22:43 by Gus Richter

Neredbojias wrote:
> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>
>> if I have 6 divs,
>> div1 div2 div3 div4 div5 div6
>>
>> if I use float:left for all, the divs are all near in one row.
>>
>> how can to have put side by side in two rows;
>> i.e. first 3 near and other 3 near but below;
>> notice: I not want use other div for group first 3; but want use the
>> style;
>>
>>
>> I tested with insertion on div4 the clear:left;
>> div4 ok I have in 2nd row but is all expanse and not have near the
>> div5 and div6.
>> howcan resolve?
>>
>> ------------------------------------------------
>>
>> other: for to have
>> <div>
>> div1 div2 div3
>> </div>
>>
>> three div near using the float and one external div that contain
>> all, is possible?
>> ask because with float of div1 div2 div3 the external div not work
>> good
>
> Try this:
>
> <div>
> div1 div2 div3
> </div>
> <div style="clear:both;">
> div4 div5 div6
> </div>

Try also:

div1 div2 div3
<div style="clear:left;"></div>
div4 div5 div6

--
Gus

Report this message

#4: Re: div-float

Posted on 2008-04-22 23:34:29 by dorayme

In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
Gus Richter <gusrichter@netscape.net> wrote:

> Neredbojias wrote:
> > On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
> >
> >> if I have 6 divs,
> >> div1 div2 div3 div4 div5 div6
> >>
> >> if I use float:left for all, the divs are all near in one row.
> >>
> >> how can to have put side by side in two rows;
> >> i.e. first 3 near and other 3 near but below;
> >> notice: I not want use other div for group first 3; but want use the
> >> style;
> >>
> >>
> >> I tested with insertion on div4 the clear:left;
> >> div4 ok I have in 2nd row but is all expanse and not have near the
> >> div5 and div6.
> >> howcan resolve?
> >>
> >> ------------------------------------------------
> >>
> >> other: for to have
> >> <div>
> >> div1 div2 div3
> >> </div>
> >>
> >> three div near using the float and one external div that contain
> >> all, is possible?
> >> ask because with float of div1 div2 div3 the external div not work
> >> good
> >
> > Try this:
> >
> > <div>
> > div1 div2 div3
> > </div>
> > <div style="clear:both;">
> > div4 div5 div6
> > </div>
>
> Try also:
>
> div1 div2 div3
> <div style="clear:left;"></div>
> div4 div5 div6

Or perhaps more economical still:

div1 div2 div3
div4 div5 div6

and style div4 with clear: left;

--
dorayme

Report this message

#5: Re: div-float

Posted on 2008-04-22 23:50:17 by Ed Jay

dorayme scribed:

>In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.net> wrote:
>
>> Neredbojias wrote:
>> > On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>> >
>> >> if I have 6 divs,
>> >> div1 div2 div3 div4 div5 div6
>> >>
>> >> if I use float:left for all, the divs are all near in one row.
>> >>
>> >> how can to have put side by side in two rows;
>> >> i.e. first 3 near and other 3 near but below;
>> >> notice: I not want use other div for group first 3; but want use the
>> >> style;
>> >>
>> >>
>> >> I tested with insertion on div4 the clear:left;
>> >> div4 ok I have in 2nd row but is all expanse and not have near the
>> >> div5 and div6.
>> >> howcan resolve?
>> >>
>> >> ------------------------------------------------
>> >>
>> >> other: for to have
>> >> <div>
>> >> div1 div2 div3
>> >> </div>
>> >>
>> >> three div near using the float and one external div that contain
>> >> all, is possible?
>> >> ask because with float of div1 div2 div3 the external div not work
>> >> good
>> >
>> > Try this:
>> >
>> > <div>
>> > div1 div2 div3
>> > </div>
>> > <div style="clear:both;">
>> > div4 div5 div6
>> > </div>
>>
>> Try also:
>>
>> div1 div2 div3
>> <div style="clear:left;"></div>
>> div4 div5 div6
>
>Or perhaps more economical still:
>
>div1 div2 div3
>div4 div5 div6
>
>and style div4 with clear: left;

Would it be styled clear:left;float:left; ?
--
Ed Jay (remove 'M' to respond by email)

Report this message

#6: Re: div-float

Posted on 2008-04-22 23:58:49 by Gus Richter

dorayme wrote:
> In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.net> wrote:
>
>> Neredbojias wrote:
>>> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>>>
>>>> if I have 6 divs,
>>>> div1 div2 div3 div4 div5 div6
>>>>
>>>> if I use float:left for all, the divs are all near in one row.
>>>>
>>>> how can to have put side by side in two rows;
>>>> i.e. first 3 near and other 3 near but below;
>>>> notice: I not want use other div for group first 3; but want use the
>>>> style;
>>>>
>>>>
>>>> I tested with insertion on div4 the clear:left;
>>>> div4 ok I have in 2nd row but is all expanse and not have near the
>>>> div5 and div6.
>>>> howcan resolve?
>>>>
>>>> ------------------------------------------------
>>>>
>>>> other: for to have
>>>> <div>
>>>> div1 div2 div3
>>>> </div>
>>>>
>>>> three div near using the float and one external div that contain
>>>> all, is possible?
>>>> ask because with float of div1 div2 div3 the external div not work
>>>> good
>>>
>>> Try this:
>>>
>>> <div>
>>> div1 div2 div3
>>> </div>
>>> <div style="clear:both;">
>>> div4 div5 div6
>>> </div>
>> Try also:
>>
>> div1 div2 div3
>> <div style="clear:left;"></div>
>> div4 div5 div6
>
> Or perhaps more economical still:
>
> div1 div2 div3
> div4 div5 div6
>
> and style div4 with clear: left;

Agreed.

--
Gus

Report this message

#7: Re: div-float

Posted on 2008-04-23 00:06:00 by Ben C

On 2008-04-22, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.net> wrote:
>
>> Neredbojias wrote:
>> > On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>> >
>> >> if I have 6 divs,
>> >> div1 div2 div3 div4 div5 div6
>> >>
>> >> if I use float:left for all, the divs are all near in one row.
>> >>
>> >> how can to have put side by side in two rows;
>> >> i.e. first 3 near and other 3 near but below;
>> >> notice: I not want use other div for group first 3; but want use the
>> >> style;
>> >>
>> >>
>> >> I tested with insertion on div4 the clear:left;
>> >> div4 ok I have in 2nd row but is all expanse and not have near the
>> >> div5 and div6.
>> >> howcan resolve?
>> >>
>> >> ------------------------------------------------
>> >>
>> >> other: for to have
>> >> <div>
>> >> div1 div2 div3
>> >> </div>
>> >>
>> >> three div near using the float and one external div that contain
>> >> all, is possible?
>> >> ask because with float of div1 div2 div3 the external div not work
>> >> good
>> >
>> > Try this:
>> >
>> > <div>
>> > div1 div2 div3
>> > </div>
>> > <div style="clear:both;">
>> > div4 div5 div6
>> > </div>
>>
>> Try also:
>>
>> div1 div2 div3
>> <div style="clear:left;"></div>
>> div4 div5 div6
>
> Or perhaps more economical still:
>
> div1 div2 div3
> div4 div5 div6
>
> and style div4 with clear: left;

But OP said he tried this but had "all expanse and not have near the
div5 and div6".

I am puzzled by this. I wondered if the floats are not all the same
sizes and shapes and the problem is one of "float snagging". But I can't
think how, because clear on div4 should get it clear of all of divs 1, 2
and 3, so even if they are different heights, div5 should make it to the
right edge of div4.

As far as I can see what you're suggesting and what the OP originally
tried should work, unless this is just an IE bug or something.

artev: I think you need to post a URL to your test page.

Report this message

#8: Re: div-float

Posted on 2008-04-23 00:14:02 by dorayme

In article <rbns04l30t0ksvgc0csckpjs7ljj1ahd2t@4ax.com>,
Ed Jay <edMbj@aes-intl.com> wrote:

> dorayme scribed:
>
> >In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
> > Gus Richter <gusrichter@netscape.net> wrote:
> >
> >> Neredbojias wrote:
> >> > On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
> >> >
> >> >> if I have 6 divs,
> >> >> div1 div2 div3 div4 div5 div6
> >> >>
> >> >> if I use float:left for all, the divs are all near in one row.
> >> >>
> >> >> how can to have put side by side in two rows;
> >> >> i.e. first 3 near and other 3 near but below;
> >> >> notice: I not want use other div for group first 3; but want use the
> >> >> style;
> >> >>
> >> >>
> >> >> I tested with insertion on div4 the clear:left;
> >> >> div4 ok I have in 2nd row but is all expanse and not have near the
> >> >> div5 and div6.
> >> >> howcan resolve?
> >> >>
> >> >> ------------------------------------------------
> >> >>
> >> >> other: for to have
> >> >> <div>
> >> >> div1 div2 div3
> >> >> </div>
> >> >>
> >> >> three div near using the float and one external div that contain
> >> >> all, is possible?
> >> >> ask because with float of div1 div2 div3 the external div not work
> >> >> good
> >> >
> >> > Try this:
> >> >
> >> > <div>
> >> > div1 div2 div3
> >> > </div>
> >> > <div style="clear:both;">
> >> > div4 div5 div6
> >> > </div>
> >>
> >> Try also:
> >>
> >> div1 div2 div3
> >> <div style="clear:left;"></div>
> >> div4 div5 div6
> >
> >Or perhaps more economical still:
> >
> >div1 div2 div3
> >div4 div5 div6
> >
> >and style div4 with clear: left;
>
> Would it be styled clear:left;float:left; ?

I assume you would have something like div {float: left;} in your css in
the head or linked file. You just style the particular div4 one with the
extra instruction because that is the one tha you want to clear the
previous floats. Or, put it another way, yes, it should be styled float:
left just as all the other divs are so styled.

--
dorayme

Report this message

#9: Re: div-float

Posted on 2008-04-23 00:21:41 by dorayme

In article <slrng0soae.gqk.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> > Or perhaps more economical still:
> >
> > div1 div2 div3
> > div4 div5 div6
> >
> > and style div4 with clear: left;
>
> But OP said he tried this but had "all expanse and not have near the
> div5 and div6".
>
> I am puzzled by this. I wondered if the floats are not all the same
> sizes and shapes and the problem is one of "float snagging". But I can't
> think how, because clear on div4 should get it clear of all of divs 1, 2
> and 3, so even if they are different heights, div5 should make it to the
> right edge of div4.
>
> As far as I can see what you're suggesting and what the OP originally
> tried should work, unless this is just an IE bug or something.
>
> artev: I think you need to post a URL to your test page.

Good idea!

Given OP's further question to me, he *may* be inline css'ing all the
divs except div4 and using clear only on that one and forgetting or not
knowing to also float it?

--
dorayme

Report this message

#10: Re: div-float

Posted on 2008-04-23 01:19:02 by Gus Richter

Ed Jay wrote:
> dorayme scribed:
>
>> In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
>> Gus Richter <gusrichter@netscape.net> wrote:
>>
>>> Neredbojias wrote:
>>>> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>>>>
>>>>> if I have 6 divs,
>>>>> div1 div2 div3 div4 div5 div6
>>>>>
>>>>> if I use float:left for all, the divs are all near in one row.
>>>>>
>>>>> how can to have put side by side in two rows;
>>>>> i.e. first 3 near and other 3 near but below;
>>>>> notice: I not want use other div for group first 3; but want use the
>>>>> style;
>>>>>
>>>>>
>>>>> I tested with insertion on div4 the clear:left;
>>>>> div4 ok I have in 2nd row but is all expanse and not have near the
>>>>> div5 and div6.
>>>>> howcan resolve?
>>>>>
>>>>> ------------------------------------------------
>>>>>
>>>>> other: for to have
>>>>> <div>
>>>>> div1 div2 div3
>>>>> </div>
>>>>>
>>>>> three div near using the float and one external div that contain
>>>>> all, is possible?
>>>>> ask because with float of div1 div2 div3 the external div not work
>>>>> good
>>>>
>>>> Try this:
>>>>
>>>> <div>
>>>> div1 div2 div3
>>>> </div>
>>>> <div style="clear:both;">
>>>> div4 div5 div6
>>>> </div>
>>> Try also:
>>>
>>> div1 div2 div3
>>> <div style="clear:left;"></div>
>>> div4 div5 div6
>> Or perhaps more economical still:
>>
>> div1 div2 div3
>> div4 div5 div6
>>
>> and style div4 with clear: left;
>
> Would it be styled clear:left;float:left; ?

Or else: float:left;clear:left;
The Spec says (somewhere IIRC) that the order of declarations does not
matter.

--
Gus

Report this message

#11: Re: div-float here code

Posted on 2008-04-23 01:34:33 by artev

Code below
1st problem)
with firefox work good, I have
div1 div2 div3
div4 div5 div6

but with IE not work, I see this
div1 div2 div3 div5 div6
div4

2nd)
I want border blue (div0) that contains (perimeter) all the other divs.
not work.

------------------------------------------------------------ -------------
I use in localhost:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
..div0-style{
border:2px solid blue;
}

..div1-style, .div2-style, .div3-style {
border:1px solid red;
float:left;
}

..div4-style{
border:1px solid red;
clear:left;
float:left;
}

..div5-style, .div6-style {
border:1px solid red;
float:left;
}
</style>


</head>

<body>
<div class="div0-style">
<div class="div1-style">TEXT 01</div>
<div class="div2-style">TEXT 02</div>
<div class="div3-style">TEXT 03</div>
<div class="div4-style">TEXT 04</div>
<div class="div5-style">TEXT 05</div>
<div class="div6-style">TEXT 06</div>
</div>
</body>

</html>

Report this message

#12: Re: div-float

Posted on 2008-04-23 01:43:40 by artev

> Try this:
>
> <div>
> div1 div2 div3
> </div>
> <div style="clear:both;">
> div4 div5 div6
> </div>

I know this solution .
but want resolve if possible using only class

Report this message

#13: Re: div-float

Posted on 2008-04-23 01:46:59 by artev

>> Try this:
>>
>> <div>
>> div1 div2 div3
>> </div>
>> <div style="clear:both;">
>> div4 div5 div6
>> </div>
>
> Try also:
>
> div1 div2 div3
> <div style="clear:left;"></div>
> div4 div5 div6

thanks for solution;
but must resolve only with style (not adding other div) if is possible;
I postd also code (see my Re myself)

Report this message

#14: Re: div-float

Posted on 2008-04-23 01:47:57 by Ed Jay

Gus Richter scribed:

>Ed Jay wrote:
>> dorayme scribed:
>>
>>> In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
>>> Gus Richter <gusrichter@netscape.net> wrote:
>>>
>>>> Neredbojias wrote:
>>>>> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>>>>>
>>>>>> if I have 6 divs,
>>>>>> div1 div2 div3 div4 div5 div6
>>>>>>
>>>>>> if I use float:left for all, the divs are all near in one row.
>>>>>>
>>>>>> how can to have put side by side in two rows;
>>>>>> i.e. first 3 near and other 3 near but below;
>>>>>> notice: I not want use other div for group first 3; but want use the
>>>>>> style;
>>>>>>
>>>>>>
>>>>>> I tested with insertion on div4 the clear:left;
>>>>>> div4 ok I have in 2nd row but is all expanse and not have near the
>>>>>> div5 and div6.
>>>>>> howcan resolve?
>>>>>>
>>>>>> ------------------------------------------------
>>>>>>
>>>>>> other: for to have
>>>>>> <div>
>>>>>> div1 div2 div3
>>>>>> </div>
>>>>>>
>>>>>> three div near using the float and one external div that contain
>>>>>> all, is possible?
>>>>>> ask because with float of div1 div2 div3 the external div not work
>>>>>> good
>>>>>
>>>>> Try this:
>>>>>
>>>>> <div>
>>>>> div1 div2 div3
>>>>> </div>
>>>>> <div style="clear:both;">
>>>>> div4 div5 div6
>>>>> </div>
>>>> Try also:
>>>>
>>>> div1 div2 div3
>>>> <div style="clear:left;"></div>
>>>> div4 div5 div6
>>> Or perhaps more economical still:
>>>
>>> div1 div2 div3
>>> div4 div5 div6
>>>
>>> and style div4 with clear: left;
>>
>> Would it be styled clear:left;float:left; ?
>
>Or else: float:left;clear:left;
>The Spec says (somewhere IIRC) that the order of declarations does not
>matter.

Why doesn't the clear clear the float?
--
Ed Jay (remove 'M' to respond by email)

Report this message

#15: Re: div-float

Posted on 2008-04-23 01:54:06 by artev

> Or perhaps more economical still:
>
> div1 div2 div3
> div4 div5 div6
>
> and style div4 with clear: left;

not work
so I have
div1 div2 div3
div4
div5 div6

see my code (Re at myself);
also I want use not new div (must test
resolve only using style if possible)

Report this message

#16: Re: div-float

Posted on 2008-04-23 01:55:57 by artev

I posted code
and want not use new div (must test
resolve only using style if possible)

Report this message

#17: Re: div-float

Posted on 2008-04-23 04:01:15 by Gus Richter

Ed Jay wrote:
> Gus Richter scribed:
>
>> Ed Jay wrote:
>>> dorayme scribed:
>>>
>>>> In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
>>>> Gus Richter <gusrichter@netscape.net> wrote:
>>>>
>>>>> Neredbojias wrote:
>>>>>> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>>>>>>
>>>>>>> if I have 6 divs,
>>>>>>> div1 div2 div3 div4 div5 div6
>>>>>>>
>>>>>>> if I use float:left for all, the divs are all near in one row.
>>>>>>>
>>>>>>> how can to have put side by side in two rows;
>>>>>>> i.e. first 3 near and other 3 near but below;
>>>>>>> notice: I not want use other div for group first 3; but want use the
>>>>>>> style;
>>>>>>>
>>>>>>>
>>>>>>> I tested with insertion on div4 the clear:left;
>>>>>>> div4 ok I have in 2nd row but is all expanse and not have near the
>>>>>>> div5 and div6.
>>>>>>> howcan resolve?
>>>>>>>
>>>>>>> ------------------------------------------------
>>>>>>>
>>>>>>> other: for to have
>>>>>>> <div>
>>>>>>> div1 div2 div3
>>>>>>> </div>
>>>>>>>
>>>>>>> three div near using the float and one external div that contain
>>>>>>> all, is possible?
>>>>>>> ask because with float of div1 div2 div3 the external div not work
>>>>>>> good
>>>>>>
>>>>>> Try this:
>>>>>>
>>>>>> <div>
>>>>>> div1 div2 div3
>>>>>> </div>
>>>>>> <div style="clear:both;">
>>>>>> div4 div5 div6
>>>>>> </div>
>>>>> Try also:
>>>>>
>>>>> div1 div2 div3
>>>>> <div style="clear:left;"></div>
>>>>> div4 div5 div6
>>>> Or perhaps more economical still:
>>>>
>>>> div1 div2 div3
>>>> div4 div5 div6
>>>>
>>>> and style div4 with clear: left;
>>> Would it be styled clear:left;float:left; ?
>> Or else: float:left;clear:left;
>> The Spec says (somewhere IIRC) that the order of declarations does not
>> matter.
>
> Why doesn't the clear clear the float?

div4 with the float:left;clear:left; applied, _does_ clear and is
shifted down and _then_ floated left.

All divs are floated left. Perhaps I don't understand the question.

--
Gus

Report this message

#18: Re: div-float here code

Posted on 2008-04-23 04:15:48 by dorayme

In article <8hsw1wayki3h$.ycd6gea55pnq.dlg@40tude.net>,
artev <mailnotspammm@notspamm.nn> wrote:

> Code below
> 1st problem)
> with firefox work good, I have
> div1 div2 div3
> div4 div5 div6
>
> but with IE not work, I see this
> div1 div2 div3 div5 div6
> div4
>
> 2nd)
> I want border blue (div0) that contains (perimeter) all the other divs.
> not work.
>
> ------------------------------------------------------------ -------------
> I use in localhost:
>
....

First, about the blue border. In good modern browsers, you can get what
you want by overflow: hidden on the container for your floats. This will
not work for Internet Explorer 6 though. Internet Explorer 6 has a
natural propensity to grow height for its floated children when it has
an explicit width assigned to it. Even though this is a default, you
need to put it in. So add to your class "div0-style", width: 100%; and
it will grow height and the blue will enclose all the divs.

Second, the other problem is exceedingly difficult because of the
hopeless state of IE6's float handling. floats 4, 5 and 6 will not drop
to the next line by the method I recommended (or as others recommended)
in IE6 on your sort of code. You will get 4 dropping but leaving 1, 2,
3, 5 and 6 on the top line. Crazy and infuriating, yes. So you need a
strategy that is rather different for IE 6.

The best I can do for you at the moment is something like this that
works on my test in IE6 just now:

<http://netweaver.com.au/alt/artev2.html>

(Gus, I still owe you an example too...)

--
dorayme

Report this message

#19: Re: div-float

Posted on 2008-04-23 04:22:06 by rf

Ed Jay <edMbj@aes-intl.com> wrote in
news:v7us04hu8terapf9kvju22vgkrfahs7ahg@4ax.com:

> Why doesn't the clear clear the float?

As somebody pointed out over at aww (where BTW this question has been
multiposted) this appears to be a bug in IE, all versions.

The cleared element does clear the floated elements above it (in the
source) but the following floats incorrectly float above the clearing
element. IE is breaking rule 5 of float behaviour.

--
Richard
Killing all threads involving google groups
The Usenet Improvement Project: http://improve-usenet.org

Report this message

#20: Re: div-float

Posted on 2008-04-23 04:45:05 by Ed Jay

Gus Richter scribed:

>Ed Jay wrote:
>> Gus Richter scribed:
>>
>>> Ed Jay wrote:
>>>> dorayme scribed:
>>>>
>>>>> In article <a5ydncWZoaaI1JPVnZ2dnUVZ_hninZ2d@golden.net>,
>>>>> Gus Richter <gusrichter@netscape.net> wrote:
>>>>>
>>>>>> Neredbojias wrote:
>>>>>>> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>>>>>>>
>>>>>>>> if I have 6 divs,
>>>>>>>> div1 div2 div3 div4 div5 div6
>>>>>>>>
>>>>>>>> if I use float:left for all, the divs are all near in one row.
>>>>>>>>
>>>>>>>> how can to have put side by side in two rows;
>>>>>>>> i.e. first 3 near and other 3 near but below;
>>>>>>>> notice: I not want use other div for group first 3; but want use the
>>>>>>>> style;
>>>>>>>>
>>>>>>>>
>>>>>>>> I tested with insertion on div4 the clear:left;
>>>>>>>> div4 ok I have in 2nd row but is all expanse and not have near the
>>>>>>>> div5 and div6.
>>>>>>>> howcan resolve?
>>>>>>>>
>>>>>>>> ------------------------------------------------
>>>>>>>>
>>>>>>>> other: for to have
>>>>>>>> <div>
>>>>>>>> div1 div2 div3
>>>>>>>> </div>
>>>>>>>>
>>>>>>>> three div near using the float and one external div that contain
>>>>>>>> all, is possible?
>>>>>>>> ask because with float of div1 div2 div3 the external div not work
>>>>>>>> good
>>>>>>>
>>>>>>> Try this:
>>>>>>>
>>>>>>> <div>
>>>>>>> div1 div2 div3
>>>>>>> </div>
>>>>>>> <div style="clear:both;">
>>>>>>> div4 div5 div6
>>>>>>> </div>
>>>>>> Try also:
>>>>>>
>>>>>> div1 div2 div3
>>>>>> <div style="clear:left;"></div>
>>>>>> div4 div5 div6
>>>>> Or perhaps more economical still:
>>>>>
>>>>> div1 div2 div3
>>>>> div4 div5 div6
>>>>>
>>>>> and style div4 with clear: left;
>>>> Would it be styled clear:left;float:left; ?
>>> Or else: float:left;clear:left;
>>> The Spec says (somewhere IIRC) that the order of declarations does not
>>> matter.
>>
>> Why doesn't the clear clear the float?
>
>div4 with the float:left;clear:left; applied, _does_ clear and is
>shifted down and _then_ floated left.
>
>All divs are floated left. Perhaps I don't understand the question.

You not only understood it, you answered it. Thanks.
--
Ed Jay (remove 'M' to respond by email)

Report this message

#21: Re: div-float here code

Posted on 2008-04-23 05:41:00 by Gus Richter

artev wrote:
>
> I want .............

1.
You are increasing your difficulties by using the Transitional Doctype
which calls the browser's Quirks Mode - it's best to use Strict.
2.
IE does not support Float and Clear properly. Your condition of not
introducing other divs in order to make IE render properly is not
acceptable to me. You search for "IE float problems" and see if you can
find relief. An IE group may be best to ask?
3.
Your code works with Fx, Opera and Safari, but not with IE.
Adding the first clearing div will make it also work with IE.
Adding the second clearing div will place all divs inside "div0-style".
This is your new markup:

<div class="div0-style">
<div class="div1-style">TEXT 01</div>
<div class="div2-style">TEXT 02</div>
<div class="div3-style">TEXT 03</div>
<div style="clear:left;"></div>
<div class="div4-style">TEXT 04</div>
<div class="div5-style">TEXT 05</div>
<div class="div6-style">TEXT 06</div>
<div style="clear:left;"></div>
</div>

I'm out of this thread.

--
Gus

Report this message

#22: Re: div-float here code

Posted on 2008-04-23 05:44:21 by Gus Richter

dorayme wrote:
>
> The best I can do for you at the moment is something like this that
> works on my test in IE6 just now:
>
> <http://netweaver.com.au/alt/artev2.html>

Hmm, wrapping the three divs inside the clearing div - not my cup
(although it works).
Check this out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
..container {
border:2px solid blue;
}
div.xxx {
border:1px solid red;float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="xxx">TEXT 01</div>
<div class="xxx">TEXT 02</div>
<div class="xxx">TEXT 03</div>
<div style="clear:left;"></div>
<div class="xxx">TEXT 04</div>
<div class="xxx">TEXT 05</div>
<div class="xxx">TEXT 06</div>
<div style="clear:left;"></div>
</div>
</body>
</html>

> (Gus, I still owe you an example too...)

Promises, promises ;-)

--
Gus

Report this message

#23: Re: div-float here code

Posted on 2008-04-23 06:44:16 by dorayme

In article <6dqdnYQo1uEKLZPVnZ2dnUVZ_vudnZ2d@golden.net>,
Gus Richter <gusrichter@netscape.net> wrote:

> dorayme wrote:
> >
> > The best I can do for you at the moment is something like this that
> > works on my test in IE6 just now:
> >
> > <http://netweaver.com.au/alt/artev2.html>
>
> Hmm, wrapping the three divs inside the clearing div - not my cup
> (although it works).
> Check this out:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
....

Fine, if your cup of tea for a restricted problem like this is to use 9
divs instead of 8 in the attempt to appease IE6.

Do you realise Gus, that there are only so many divs on earth, they are
not an endless supply. My organization, Divpeace, is devoted to their
conservation. (If you or Harlan or Richard care to join, please send $US
10)


> > (Gus, I still owe you an example too...)
>
> Promises, promises ;-)

Honestly Gus... I am just hoping someone will front up with a bet as
they begin to doubt me so I can make a quid on the deal*. (I have to
look up some old emails and find the example...).

-----------
*Which reminds me of a Jewish parrot joke:

David Bronstein had a parrot that talked really well and could pray
aloud. He told his mates at the synagogue that he had a Jewish parrot
that prayed aloud. They laughed and did not believe him. He bet them it
was true. Wagers were organised. Next Sat he took the bird down to the
hall behind the synagogue as arranged, his mates all smiling and shaking
their heads. He puts the bird on the edge of a lectern and steps back
and says, "Pray!"

Total silence.

"Pray!"

Again, total silence.

His mates begin to jeer and demand their money. He pays out big and
takes the bird home.

He is furious. He grabs the bird by the neck. Do you know how much I
lost because of your little stunt? And I am a laughing stock already! He
tells the parrot to take a good look around and enjoy its last breath of
air.

As he squeezes its neck, the bird suddenly screeches out: "Hey, Stop!
Think! Think of the odds they will give you if you arrange another bet
for next week!"

--
dorayme

Report this message

#24: Re: div-float here code

Posted on 2008-04-23 06:47:49 by rf

Gus Richter <gusrichter@netscape.net> wrote in
news:LpWdnfcwGoBQMpPVnZ2dnUVZ_q7inZ2d@golden.net:

> 1.
> You are increasing your difficulties by using the Transitional Doctype
> which calls the browser's Quirks Mode - it's best to use Strict.

Nope. Transitional itself does not trigger quirks mode. The lack of a
system identifier (the URL to a DTD) does, with HTML at least. XHTML is
different. With a system identifier specified, or XHTML, you get "almost
standards mode" in most browsers.

That's what wikipedia says anyway :-)

http://en.wikipedia.org/wiki/Quirks_mode

--
Richard
Killing all threads involving google groups
The Usenet Improvement Project: http://improve-usenet.org

Report this message

#25: Re: div-float here code

Posted on 2008-04-23 07:42:02 by BootNic

dorayme <doraymeRidThis@optusnet.com.au> wrote in
news:doraymeRidThis-82E448.12154823042008@web.aioe.org:

> In article <8hsw1wayki3h$.ycd6gea55pnq.dlg@40tude.net>,
> artev <mailnotspammm@notspamm.nn> wrote:
>
[snip]
>> with firefox work good, I have
>> div1 div2 div3
>> div4 div5 div6
>>
>> but with IE not work, I see this
>> div1 div2 div3 div5 div6 div4
[snip]
> <http://netweaver.com.au/alt/artev2.html>

Example based off dorayme's example

[url] http://snurl.com/25e99 [/url]

--
BootNic Wednesday April 23, 2008 1:42 AM
"I've noticed that the press tends to be quite accurate, except when
they're writing on a subject I know something about."
*Keith F. Lynch*

Report this message

#26: Re: div-float here code

Posted on 2008-04-23 08:33:38 by Gus Richter

BootNic wrote:
> dorayme <doraymeRidThis@optusnet.com.au> wrote in
> news:doraymeRidThis-82E448.12154823042008@web.aioe.org:
>
>> In article <8hsw1wayki3h$.ycd6gea55pnq.dlg@40tude.net>,
>> artev <mailnotspammm@notspamm.nn> wrote:
>>
> [snip]
>>> with firefox work good, I have
>>> div1 div2 div3
>>> div4 div5 div6
>>>
>>> but with IE not work, I see this
>>> div1 div2 div3 div5 div6 div4
> [snip]
>> <http://netweaver.com.au/alt/artev2.html>
>
> Example based off dorayme's example
>
> [url] http://snurl.com/25e99 [/url]

This one works in all as well without any conditional, floats or
clearing divs:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

..container {border: rgb(0, 0, 255) 2px solid;}
div.xxx {border: rgb(255, 0, 0) 1px solid;display:inline;}
..yyy { display:block;}

</style>
</head>
<body>
<div class="container">
<div class="xxx">TEXT 01</div>
<div class="xxx">TEXT 02</div>
<div class="xxx">TEXT 03</div>

<div class="yyy">TEXT 04
<div class="xxx">TEXT 05</div>
<div class="xxx">TEXT 06</div>
</div>
</div>
</body>
</html>

Report this message

#27: Re: div-float here code

Posted on 2008-04-23 08:42:37 by Gus Richter

dorayme wrote:
>
> Fine, if your cup of tea for a restricted problem like this is to use 9
> divs instead of 8 in the attempt to appease IE6.

Really, yours is just fine. It's all a matter of preference.
Isn't it great that there is more than one way to skin a cat?
(Don't get on me about cats - we have two of them.)

>>> (Gus, I still owe you an example too...)
>> Promises, promises ;-)
>
> Honestly Gus...

Seriously, don't go to any bother. I'm sure that there is some new
combination out there which will make IE vomit.

--
Gus

Report this message

#28: Re: div-float here code

Posted on 2008-04-23 08:45:01 by Neredbojias

On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:

> Code below
> 1st problem)
> with firefox work good, I have
> div1 div2 div3
> div4 div5 div6
>
> but with IE not work, I see this
> div1 div2 div3 div5 div6
> div4

Try putting "clear:right;" on div3.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Report this message

#29: Re: div-float here code

Posted on 2008-04-23 09:27:07 by Ben C

On 2008-04-23, rf <rf@x.invalid> wrote:
> Gus Richter <gusrichter@netscape.net> wrote in
> news:LpWdnfcwGoBQMpPVnZ2dnUVZ_q7inZ2d@golden.net:
>
>> 1.
>> You are increasing your difficulties by using the Transitional Doctype
>> which calls the browser's Quirks Mode - it's best to use Strict.
>
> Nope. Transitional itself does not trigger quirks mode. The lack of a
> system identifier (the URL to a DTD) does, with HTML at least. XHTML is
> different. With a system identifier specified, or XHTML, you get "almost
> standards mode" in most browsers.
>
> That's what wikipedia says anyway :-)

> http://en.wikipedia.org/wiki/Quirks_mode

You're both right, because "almost strict mode" is a different flavour
of quirks mode.

Strict is the only sensible data point since there are no standards or
specifications for anything else (nor even drafted apologies, excuses,
plastic imitations, etc.)

Report this message

#30: Re: div-float here code

Posted on 2008-04-23 09:44:46 by Gus Richter

rf wrote:
> Gus Richter <gusrichter@netscape.net> wrote in
> news:LpWdnfcwGoBQMpPVnZ2dnUVZ_q7inZ2d@golden.net:
>
>> 1.
>> You are increasing your difficulties by using the Transitional Doctype
>> which calls the browser's Quirks Mode - it's best to use Strict.
>
> Nope. Transitional itself does not trigger quirks mode. The lack of a
> system identifier (the URL to a DTD) does, with HTML at least. XHTML is
> different. With a system identifier specified, or XHTML, you get "almost
> standards mode" in most browsers.
>
> That's what wikipedia says anyway :-)
>
> http://en.wikipedia.org/wiki/Quirks_mode

I know. I'm wrong again. Isn't the first time and won't be the last.
From a chart that I have, I've taken the pertinent portions:

FF/Safari IE6/Op7.1+

HTML 4.01 Strict S S
HTML 4.01 Strict w URI S S
HTML 4.01 Transitional Q Q
HTML 4.01 Transitional S S
with URI

XHTML 1.0 Strict S S
XHTML 1.0 Strict w XML S Q
XHTML 1.0 Transitional S S
XHTML 1.0 Transitional S Q
with XML

And yet, read the further notes I have attached:

* Obsolete Elements (deprecated in HTML 4.01) - using them requires
"Transitional/loose DTD"
IFRAME | APPLET | BASEFONT | CENTER | DIR | FONT | ISINDEX | MENU
| S | STRIKE | U

The "Transitional/loose DTD" has no further use today for any newly
created documents. It was a temporary measure in days past to accomodate
legacy browsers' quirky behavior. Those browsers are no longer in use
today, hence don't use Transitional/loose and don't use the deprecated
elements.
One major difference Strict vs. Transitional/loose is that in Strict,
only % block may be the child of Body, whereas in Transitional/loose, %
flow (%block; | %inline;) may be the child of Body.

No matter if there are errors in the notes, the bottom line is:
1. Use Strict doctype with URI (unless there is a very good reason
otherwise).
2. Don't use deprecated elements (unless there is a very good reason
otherwise).

--
Gus

Report this message

#31: Re: div-float here code

Posted on 2008-04-23 21:01:58 by Bergamot

Neredbojias wrote:
> On 22 Apr 2008, artev <mailnotspammm@notspamm.nn> wrote:
>
>> with IE not work, I see this
>> div1 div2 div3 div5 div6
>> div4
>
> Try putting "clear:right;" on div3.

That won't do anything if all the divs are floated left.
http://www.w3.org/TR/CSS21/visuren.html#flow-control

Besides, div3 is not the problem child, those following div4 are.

--
Berg

Report this message

#32: Re: div-float here code

Posted on 2008-04-23 23:47:21 by Neredbojias

On 23 Apr 2008, Bergamot <bergamot@visi.com> wrote:

>>> with IE not work, I see this
>>> div1 div2 div3 div5 div6
>>> div4
>>
>> Try putting "clear:right;" on div3.
>
> That won't do anything if all the divs are floated left.
> http://www.w3.org/TR/CSS21/visuren.html#flow-control

Okay, then how about this:

<div>
<div>div1</div>
<div>div2</div>
<div style="float:none;">div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
</div>

....ie, just don't float the 3rd div.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Report this message

#33: Re: div-float here code

Posted on 2008-04-24 05:46:14 by dorayme

In article <Xns9A89115F21D40BootNic@bootnic.motzarella.org>,
BootNic <bootnic.bounce@gmail.com> wrote:

> dorayme <doraymeRidThis@optusnet.com.au> wrote in
> news:doraymeRidThis-82E448.12154823042008@web.aioe.org:
>
> > In article <8hsw1wayki3h$.ycd6gea55pnq.dlg@40tude.net>,
> > artev <mailnotspammm@notspamm.nn> wrote:
> >
> [snip]
> >> with firefox work good, I have
> >> div1 div2 div3
> >> div4 div5 div6
> >>
> >> but with IE not work, I see this
> >> div1 div2 div3 div5 div6 div4
> [snip]
> > <http://netweaver.com.au/alt/artev2.html>
>
> Example based off dorayme's example
>
> [url] http://snurl.com/25e99 [/url]

The *reason* OP was using float in the first place is simply obscure and
so your changing focus to simpler inline is good...

--
dorayme

Report this message

#34: Re: div-float here code

Posted on 2008-04-24 13:27:43 by Bergamot

Neredbojias wrote:
> On 23 Apr 2008, Bergamot <bergamot@visi.com> wrote:
>
>>>> with IE not work, I see this
>>>> div1 div2 div3 div5 div6
>>>> div4
>>>
>>> Try putting "clear:right;" on div3.
>>
>> That won't do anything if all the divs are floated left.
>> http://www.w3.org/TR/CSS21/visuren.html#flow-control
>
> Okay, then how about this:
>
> <div>
> <div>div1</div>
> <div>div2</div>
> <div style="float:none;">div3</div>
> <div>div4</div>
> <div>div5</div>
> <div>div6</div>
> </div>
>
> ...ie, just don't float the 3rd div.

Not sure why you put that extra div around all of it, but I suppose it
it depends on the particular content and styling whether that would give
the desired results. It could work, given the right conditions.

--
Berg

Report this message

#35: Re: div-float here code

Posted on 2008-04-24 14:47:19 by Gus Richter

Bergamot wrote:
> Neredbojias wrote:
>> On 23 Apr 2008, Bergamot <bergamot@visi.com> wrote:
>>
>>>>> with IE not work, I see this
>>>>> div1 div2 div3 div5 div6
>>>>> div4
>>>> Try putting "clear:right;" on div3.
>>> That won't do anything if all the divs are floated left.
>>> http://www.w3.org/TR/CSS21/visuren.html#flow-control
>> Okay, then how about this:
>>
>> <div>
>> <div>div1</div>
>> <div>div2</div>
>> <div style="float:none;">div3</div>
>> <div>div4</div>
>> <div>div5</div>
>> <div>div6</div>
>> </div>
>>
>> ...ie, just don't float the 3rd div.
>
> Not sure why you put that extra div around all of it, but I suppose it
> it depends on the particular content and styling whether that would give
> the desired results. It could work, given the right conditions.

Yes it works and the reason for the wrapper is, as per the OP, to place
a blue border around the whole thing and to have everything inside it.

--
Gus

Report this message

#36: Re: div-float here code

Posted on 2008-04-24 21:20:33 by Neredbojias

On 24 Apr 2008, Bergamot <bergamot@visi.com> wrote:

>> <div>
>> <div>div1</div>
>> <div>div2</div>
>> <div style="float:none;">div3</div>
>> <div>div4</div>
>> <div>div5</div>
>> <div>div6</div>
>> </div>
>>
>> ...ie, just don't float the 3rd div.
>
> Not sure why you put that extra div around all of it,

Yeah, as Gus Richter suggested, the OP indicated he didn't want to change
the html, just the styling.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Report this message

#37: Re: div-float here code

Posted on 2008-04-24 21:21:31 by Neredbojias

On 24 Apr 2008, Bergamot <bergamot@visi.com> wrote:

>> <div>
>> <div>div1</div>
>> <div>div2</div>
>> <div style="float:none;">div3</div>
>> <div>div4</div>
>> <div>div5</div>
>> <div>div6</div>
>> </div>
>>
>> ...ie, just don't float the 3rd div.
>
> Not sure why you put that extra div around all of it,

Yeah, as Gus Richter suggested, the OP indicated he didn't want to change
the html, just the styling.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Report this message

#38: Re: div-float here code

Posted on 2008-04-24 21:23:00 by Neredbojias

On 24 Apr 2008, Bergamot <bergamot@visi.com> wrote:

>> <div>
>> <div>div1</div>
>> <div>div2</div>
>> <div style="float:none;">div3</div>
>> <div>div4</div>
>> <div>div5</div>
>> <div>div6</div>
>> </div>
>>
>> ...ie, just don't float the 3rd div.
>
> Not sure why you put that extra div around all of it,

Yeah, as Gus Richter suggested, the OP indicated he didn't want to change
the html, just the styling.

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Report this message

#39: Re: div-float here code

Posted on 2008-04-24 22:28:16 by Bergamot

Neredbojias wrote:
>
> Yeah, as Gus Richter suggested, the OP indicated he didn't want to change
> the html, just the styling.

We heard you the first time. ;)

--
Berg

Report this message