floating div

[vito]

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?

 

[dorayme]

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)

 

[vito]

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

 

[jojo]

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")

 

[Martin Jay]

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.

 

[vito]

1 2

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.

 

[dorayme]

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

Forget Google, read

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

 

[Leonard Blaisdell]

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

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

leo

 

[vito]

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?

 

[Leonard Blaisdell]

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

 

[vito]

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

When you study the source for:

http://137.189.43.41/test.html

you'll find the div is not working, thanks.

 

[dorayme]

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

At http://137.189.43.41/test.html I would say to be rid of the
position, the width. the height, top, right and bottom specs:
leave them right out. And leave out height in inches for the
body? To see how silly this is, in my expert opinion, consider
what it might do to a tiny screen like a mobile or pda, it could
actually blow the thing up. Are you willing to take that risk?

 

[Leonard Blaisdell]

At http://137.189.43.41/test.html I would say to be rid of the
position, the width. the height, top, right and bottom specs:
leave them right out. And leave out height in inches for the
body? To see how silly this is, in my expert opinion, consider
what it might do to a tiny screen like a mobile or pda, it could
actually blow the thing up. Are you willing to take that risk?

That's my expert Martian I loaded the page in BBEdit. It made my
eyes cross. I couldn't offer any advice other than start over.

leo

 

[Andy Dingley]

Forget Google, read
http://www.w3.org/TR/REC-CSS2/

That raw spec is almost unreadable. This is a much better tutorial.
http://brainjar.com/css/positioning/

 

[dorayme]

"Andy Dingley <[email protected]>"

That raw spec is almost unreadable. This is a much better tutorial.
http://brainjar.com/css/positioning/

Yes, to the OP: that reference I gave you is almost unreadable.
You will have better luck with
http://brainjar.com/css/positioning/

 

[Martin Jay]

When you study the source for:

http://137.189.43.41/test.html

you'll find the div is not working, thanks.

What are you trying to do?

A page with a heading, left-hand menu, right-hand text, and a footer?
That's easy to do.

However looking through the source you appear to be creating a page for
a specific screen size.

 

[vito]

Thank you all your effort. but it's a pitty i'm unable to understand your
explanation. I tried Dorayme's suggestion to remove everything except left
in the:

http://137.189.43.41/test.html

but still it's not what i want.

If you go to:

http://www.w3.org/TR/CSS21/visuren.html#img-frame

you'll find it gives you an example. i just want to produce such a page. If
the browser window size is reduced, i expect nothing displayed will change
except the browser window will show scrollbar(s) for a user to navigate.

Thanks again for teaching me a newbie on the layout design.