«

i use div to make a layout like this:


1 2
3 3


the 1, is float:left
the 2, is float:left
the 3, is float:bottom


but the tragedy is that whenever the browser is wide enough, it becomes:

1 2 3

or the most ugly one:

1 2 3
3

how can i solve that?

In article <e7dhun$12uu$>,
"vito" <> wrote:

> i use div to make a layout like this:
>
>
> 1 2
> 3 3
>
>
> the 1, is float:left
> the 2, is float:left
> the 3, is float:bottom
>
>
> but the tragedy is that whenever the browser is wide enough, it becomes:
>
> 1 2 3
>
> or the most ugly one:
>
> 1 2 3
> 3
>
> how can i solve that?

1 2 3 and instead of 4, 3? 1 is something, 2 is something else, 3
is something else again and the 4th 3 is the same something else
as the 3rd 3? On top of this, when the browser is wide enough,
the 4th 3 disappears altogether (is the tragedy to do with this
loss?)

I don't think there is a float:bottom.

Put up a url so we can see these Chinese boxes and play with them
and give you a hand.

(I have happy memories of Hong Kong)

--
dorayme

"vito" <> wrote in message
news:e7dhun$12uu$...
>i use div to make a layout like this:
>
>
> 1 2
> 3 3
>
>
> the 1, is float:left
> the 2, is float:left
> the 3, is float:bottom
>

it can also ugly show:

1
2 3
3

or

1
2
3

vito schrieb:
> i use div to make a layout like this:
>
>
> 1 2
> 3 3
>
>
> the 1, is float:left
> the 2, is float:left
> the 3, is float:bottom
>
>
> but the tragedy is that whenever the browser is wide enough, it becomes:
>
> 1 2 3
>
> or the most ugly one:
>
> 1 2 3
> 3
>
> how can i solve that?
>
>
There is really no float:bottom, like dorayme already said. And what
would be the need to have one? Just use the br-Tag if something should
be shown below any other Objekt...
But IMHO it is enough to remove the float for 3, div (like p)
automatically appears in a new line (unless you change the type to "inline")

In message <e7dhun$12uu$>, vito
<> writes
>i use div to make a layout like this:
>
>
>1 2
>3 3
>
>
>the 1, is float:left
>the 2, is float:left
>the 3, is float:bottom

There's no 'float: bottom.' Presumably this is ignored by browsers.

How about something like this:

<div style="float: left;
width: 200px; height: 200px; border: 1px solid red;">1</div>

<div style="float: left;
width: 200px; height: 200px; border: 1px solid red;">2</div>

<div style="float: left; clear: both;
width: 200px; height: 200px; border: 1px solid red;">3</div>

Width, height, and border added to make it clear what's happening.
'clear: both;' or 'clear: left;' will bring the third floated DIV below
the two above.
--
Martin Jay
Phone/SMS: +44 7740 191877
Fax: +44 870 915 2124

>>1 2
>>3 3
>>
>>
>>the 1, is float:left
>>the 2, is float:left
>>the 3, is float:bottom
>
> There's no 'float: bottom.' Presumably this is ignored by browsers.

sorry for not admitting there's no float:bottom earlier

> How about something like this:
>
> <div style="float: left;
> width: 200px; height: 200px; border: 1px solid red;">1</div>
>
> <div style="float: left;
> width: 200px; height: 200px; border: 1px solid red;">2</div>
>
> <div style="float: left; clear: both;
> width: 200px; height: 200px; border: 1px solid red;">3</div>

How is "clear" working? Google returns little about it

Indeed i prefer

1 2
+-+
|3|
+-+

or

1 2
3

or
1 2
3

but not

1
2 3

or

1
2
3

if the browser window is not large enough, i hope the 2 will not go down but
instead stay right beside 1.

>
> Width, height, and border added to make it clear what's happening. 'clear:
> both;' or 'clear: left;' will bring the third floated DIV below the two
> above.
> --
> Martin Jay
> Phone/SMS: +44 7740 191877
> Fax: +44 870 915 2124

In article <e7fl7q$22dg$>,
"vito" <> wrote:

> How is "clear" working? Google returns little about it

Forget Google, read

http://www.w3.org/TR/REC-CSS2/

--
dorayme

In article <e7fl7q$22dg$>,
"vito" <> wrote:


> How is "clear" working? Google returns little about it

<http://www.w3.org/TR/CSS21/visuren.html#propdef-clear> should explain
it.

leo

--
<http://web0.greatbasin.net/~leo/>

thanks a lot for providing a css2 resource. but when i copy the example
(search sidebar) which has header, sidebar, main and footer and test, the
layout differs from the example shows. Does anybody have any idea?

In article <e7fv4o$26pp$>,
"vito" <> wrote:

> thanks a lot for providing a css2 resource. but when i copy the example
> (search sidebar) which has header, sidebar, main and footer and test, the
> layout differs from the example shows. Does anybody have any idea?

I entered into this thread late. Have you provided a URL? If you do or
have given a URL, real experts can help you.

leo

--
<http://web0.greatbasin.net/~leo/>