css question

Discussion in 'HTML' started by windandwaves, May 30, 2005.

  1. windandwaves

    windandwaves Guest

    Hi Dudettes and Dudes,

    Sad as it may be, I am still having trouble with the float business.

    If I want to put two divs next to each other and let them slip one under the
    other in no way then how do I do that.

    My plan was:

    <DIV ID="main">
    <DIV ID="menu" STYLE="float: left;">menu items</DIV>
    <DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
    </DIV>

    but it does not seem to work (COPY ends up under MENU - btw I am using HTML
    strict)

    what am i doing wrong?

    TIA

    - Nicolaas
    windandwaves, May 30, 2005
    #1
    1. Advertising

  2. windandwaves

    Mark Parnell Guest

    Previously in alt.html, windandwaves <> said:

    > I am still having trouble with the float business.


    http://www.w3.org/TR/CSS2/visuren.html#floats

    > <DIV ID="main">
    > <DIV ID="menu" STYLE="float: left;">menu items</DIV>
    > <DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
    > </DIV>


    > what am i doing wrong?


    For one, you aren't including a width - width is required when using
    float[1]. My guess would be that the browser is assuming a width of 100%
    or something, but who knows?

    Depending on what you are doing, you probably don't need to specify
    float: right on the second one. In fact, you may be better off using
    float: left, but that depends on the desired result.

    [1] In most situations, including this one.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
    Mark Parnell, May 30, 2005
    #2
    1. Advertising

  3. On Mon, 30 May 2005 12:07:56 +1200, in alt.html "windandwaves"
    <> wrote:

    > Hi Dudettes and Dudes,
    >
    > Sad as it may be, I am still having trouble with the float business.
    >
    > If I want to put two divs next to each other and let them slip one under the
    > other in no way then how do I do that.
    >
    > My plan was:
    >
    > <DIV ID="main">
    > <DIV ID="menu" STYLE="float: left;">menu items</DIV>
    > <DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
    > </DIV>
    >
    > but it does not seem to work (COPY ends up under MENU - btw I am using HTML
    > strict)
    >
    > what am i doing wrong?
    >
    > TIA
    >
    > - Nicolaas


    In *.css:

    div.menu { float: left; width: 25%; color: #000000; background: #c0c0c0
    url(./img/bg-menu.gif) }
    div.main { float: right; width: 73% }

    Note: I deliberately left a 2% "gutter" for spacing, otherwise the text in
    "main" winds up hard against "menu".


    In *.htm:

    <div class=menu>
    <!--#include virtual="./includes/menu.htm"-->
    </div>

    <div class=main>

    PAGE BODY HERE

    </div>
    William Hughes, May 30, 2005
    #3
  4. windandwaves

    windandwaves Guest

    William Hughes wrote:
    > On Mon, 30 May 2005 12:07:56 +1200, in alt.html "windandwaves"
    > <> wrote:
    >
    >> Hi Dudettes and Dudes,
    >>
    >> Sad as it may be, I am still having trouble with the float business.
    >>
    >> If I want to put two divs next to each other and let them slip one
    >> under the other in no way then how do I do that.
    >>
    >> My plan was:
    >>
    >> <DIV ID="main">
    >> <DIV ID="menu" STYLE="float: left;">menu items</DIV>
    >> <DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
    >> </DIV>
    >>
    >> but it does not seem to work (COPY ends up under MENU - btw I am
    >> using HTML strict)
    >>
    >> what am i doing wrong?
    >>
    >> TIA
    >>
    >> - Nicolaas

    >
    > In *.css:
    >
    > div.menu { float: left; width: 25%; color: #000000; background:
    > #c0c0c0 url(./img/bg-menu.gif) }
    > div.main { float: right; width: 73% }
    >
    > Note: I deliberately left a 2% "gutter" for spacing, otherwise the
    > text in "main" winds up hard against "menu".
    >
    >
    > In *.htm:
    >
    > <div class=menu>
    > <!--#include virtual="./includes/menu.htm"-->
    > </div>
    >
    > <div class=main>
    >
    > PAGE BODY HERE
    >
    > </div>


    that works magically (www.wapitipark.co.nz/AV/)
    windandwaves, May 30, 2005
    #4
    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. Eric
    Replies:
    4
    Views:
    688
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    448
    Jukka K. Korpela
    Sep 9, 2003
  3. Replies:
    6
    Views:
    530
    Jonathan N. Little
    Mar 18, 2006
  4. AF
    Replies:
    17
    Views:
    573
    Nije Nego
    Aug 9, 2006
  5. richard
    Replies:
    12
    Views:
    731
    dorayme
    Mar 9, 2010
Loading...

Share This Page