floating div

Discussion in 'HTML' started by vito, Jun 22, 2006.

  1. vito

    vito Guest

    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?
    vito, Jun 22, 2006
    #1
    1. Advertising

  2. vito

    dorayme Guest

    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
    dorayme, Jun 22, 2006
    #2
    1. Advertising

  3. vito

    vito Guest

    ps: floating div

    "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, Jun 22, 2006
    #3
  4. vito

    jojo Guest

    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")
    jojo, Jun 22, 2006
    #4
  5. vito

    Martin Jay Guest

    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
    Martin Jay, Jun 22, 2006
    #5
  6. vito

    vito Guest

    >>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
    vito, Jun 23, 2006
    #6
  7. vito

    dorayme Guest

    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
    dorayme, Jun 23, 2006
    #7
  8. 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/>
    Leonard Blaisdell, Jun 23, 2006
    #8
  9. vito

    vito Guest

    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?
    vito, Jun 23, 2006
    #9
  10. 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/>
    Leonard Blaisdell, Jun 23, 2006
    #10
  11. vito

    vito Guest


    > 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.
    vito, Jun 23, 2006
    #11
  12. vito

    dorayme Guest

    In article
    <-sjc.supernews.net>,
    Leonard Blaisdell <> wrote:

    > 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


    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?

    --
    dorayme
    dorayme, Jun 23, 2006
    #12
  13. In article
    <>,
    dorayme <> wrote:

    > 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

    --
    <http://web0.greatbasin.net/~leo/>
    Leonard Blaisdell, Jun 23, 2006
    #13
  14. vito

    Andy Dingley Guest

    Andy Dingley, Jun 23, 2006
    #14
  15. vito

    dorayme Guest

    dorayme, Jun 23, 2006
    #15
  16. vito

    Martin Jay Guest

    In message <e7g3m5$28om$>, vito
    <> writes

    >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.
    --
    Martin Jay
    Phone/SMS: +44 7740 191877
    Fax: +44 870 915 2124
    Martin Jay, Jun 23, 2006
    #16
  17. vito

    vito Guest

    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.
    vito, Jun 23, 2006
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tamlyn Rhodes
    Replies:
    3
    Views:
    969
    Andy Dingley
    Feb 26, 2004
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    737
  3. teeshift
    Replies:
    2
    Views:
    248
    Chris Pearl
    Dec 1, 2006
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    302
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page