Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > floating div

Reply
Thread Tools

floating div

 
 
vito
Guest
Posts: n/a
 
      06-22-2006
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?


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      06-22-2006
In article <e7dhun$12uu$(E-Mail Removed)>,
"vito" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
vito
Guest
Posts: n/a
 
      06-22-2006

"vito" <(E-Mail Removed)> wrote in message
news:e7dhun$12uu$(E-Mail Removed)...
>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


 
Reply With Quote
 
jojo
Guest
Posts: n/a
 
      06-22-2006
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")
 
Reply With Quote
 
Martin Jay
Guest
Posts: n/a
 
      06-22-2006
In message <e7dhun$12uu$(E-Mail Removed)>, vito
<(E-Mail Removed)> 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
 
Reply With Quote
 
vito
Guest
Posts: n/a
 
      06-23-2006
>>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



 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-23-2006
In article <e7fl7q$22dg$(E-Mail Removed)>,
"vito" <(E-Mail Removed)> wrote:

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


Forget Google, read

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

--
dorayme
 
Reply With Quote
 
Leonard Blaisdell
Guest
Posts: n/a
 
      06-23-2006
In article <e7fl7q$22dg$(E-Mail Removed)>,
"vito" <(E-Mail Removed)> 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/>
 
Reply With Quote
 
vito
Guest
Posts: n/a
 
      06-23-2006
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?


 
Reply With Quote
 
Leonard Blaisdell
Guest
Posts: n/a
 
      06-23-2006
In article <e7fv4o$26pp$(E-Mail Removed)>,
"vito" <(E-Mail Removed)> 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/>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
DVD Verdict reviews: A STORY OF FLOATING WEEDS / FLOATING WEEDS: CRITERION COLLECTION and more! DVD Verdict DVD Video 0 04-20-2004 09:04 AM
CSS: How to position a DIV below a floating DIV? Tamlyn Rhodes HTML 3 02-26-2004 10:33 PM



Advertisments