placing one div to the left of another

Discussion in 'HTML' started by Scott, Feb 26, 2010.

  1. Scott

    Scott Guest

    I want a web page with two divs. The first one will be 160 pixels wide
    and float to the left. The second will be unlimited width and float
    left, alongside the first. Here is some crude ascii art that probably
    won't format right, but you get the idea of it:

    .......... ............
    .DIV1 . . DIV 2.
    .......... ............

    What I have looks something like this:

    Code:
    ..foo {
       float: left;
       width: 160px;
    }
    ..bar {
      float: left;
    }
    <div class="foo">foo text</div>
    <div class="bar">bar text</div>
    
    This works fine as long as only a small amount of text is in the
    second div. If the second div has enough text to cause a wrap, then
    the second div will appear below the first div instead of appearing to
    the right of it.
    Scott, Feb 26, 2010
    #1
    1. Advertising

  2. Scott

    Gus Richter Guest

    On 2/26/2010 6:50 PM, Scott wrote:
    > I want a web page with two divs. The first one will be 160 pixels wide
    > and float to the left. The second will be unlimited width and float
    > left, alongside the first. Here is some crude ascii art that probably
    > won't format right, but you get the idea of it:
    >
    > .......... ............
    > .DIV1 . . DIV 2.
    > .......... ............
    >
    > What I have looks something like this:
    >
    >
    Code:
    > .foo {
    >     float: left;
    >     width: 160px;
    > }
    > .bar {
    >    float: left;
    > }
    > <div class="foo">foo text</div>
    > <div class="bar">bar text</div>
    > 
    >
    > This works fine as long as only a small amount of text is in the
    > second div. If the second div has enough text to cause a wrap, then
    > the second div will appear below the first div instead of appearing to
    > the right of it.


    Just remove float:left; from .bar {}

    --
    Gus
    Gus Richter, Feb 27, 2010
    #2
    1. Advertising

  3. Scott

    dorayme Guest

    In article
    <
    >,

    Scott <> wrote:

    > I want a web page with two divs. The first one will be 160 pixels wide
    > and float to the left. The second will be unlimited width and float
    > left, alongside the first. Here is some crude ascii art that probably
    > won't format right, but you get the idea of it:
    >
    > .......... ............
    > .DIV1 . . DIV 2.
    > .......... ............
    >
    > What I have looks something like this:
    >
    >
    Code:
    > .foo {
    >    float: left;
    >    width: 160px;
    > }
    > .bar {
    >   float: left;
    > }
    > <div class="foo">foo text</div>
    > <div class="bar">bar text</div>
    > 
    >
    > This works fine as long as only a small amount of text is in the
    > second div. If the second div has enough text to cause a wrap, then
    > the second div will appear below the first div instead of appearing to
    > the right of it.


    Try:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8">
    <title>Keeping right</title>
    <style type="text/css" media="all">
    ..foo {
    float: left;
    width: 160px;
    }
    ..bar {margin-left: 160px;}
    </style>
    </head>
    <body>
    <div class="foo">
    foo text
    </div>
    <div class="bar">
    bar text bar text bar text bar text
    </div>
    </body>
    </html>

    --
    dorayme
    dorayme, Feb 27, 2010
    #3
  4. Scott

    dorayme Guest

    In article <hm9on2$39j$-september.org>,
    Gus Richter <> wrote:

    > On 2/26/2010 6:50 PM, Scott wrote:
    > > I want a web page with two divs. The first one will be 160 pixels wide
    > > and float to the left. The second will be unlimited width and float
    > > left, alongside the first. Here is some crude ascii art that probably
    > > won't format right, but you get the idea of it:
    > >
    > > .......... ............
    > > .DIV1 . . DIV 2.
    > > .......... ............
    > >
    > > What I have looks something like this:
    > >
    > >
    Code:
    > > .foo {
    > >     float: left;
    > >     width: 160px;
    > > }
    > > .bar {
    > >    float: left;
    > > }
    > > <div class="foo">foo text</div>
    > > <div class="bar">bar text</div>
    > > 
    > >
    > > This works fine as long as only a small amount of text is in the
    > > second div. If the second div has enough text to cause a wrap, then
    > > the second div will appear below the first div instead of appearing to
    > > the right of it.

    >
    > Just remove float:left; from .bar {}


    Not quite.

    --
    dorayme
    dorayme, Feb 27, 2010
    #4
  5. Scott

    Gus Richter Guest

    On 2/26/2010 7:31 PM, dorayme wrote:
    > In article<hm9on2$39j$-september.org>,
    > Gus Richter<> wrote:
    >
    >> On 2/26/2010 6:50 PM, Scott wrote:
    >>> I want a web page with two divs. The first one will be 160 pixels wide
    >>> and float to the left. The second will be unlimited width and float
    >>> left, alongside the first. Here is some crude ascii art that probably
    >>> won't format right, but you get the idea of it:
    >>>
    >>> .......... ............
    >>> .DIV1 . . DIV 2.
    >>> .......... ............
    >>>
    >>> What I have looks something like this:
    >>>
    >>>
    Code:
    >>> .foo {
    >>>      float: left;
    >>>      width: 160px;
    >>> }
    >>> .bar {
    >>>     float: left;
    >>> }
    >>> <div class="foo">foo text</div>
    >>> <div class="bar">bar text</div>
    >>> 
    >>>
    >>> This works fine as long as only a small amount of text is in the
    >>> second div. If the second div has enough text to cause a wrap, then
    >>> the second div will appear below the first div instead of appearing to
    >>> the right of it.

    >>
    >> Just remove float:left; from .bar {}

    >
    > Not quite.


    Right you are. Thank you for the correction. margin-left was missing.

    --
    Gus
    Gus Richter, Feb 27, 2010
    #5
    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. news.frontiernet.net
    Replies:
    6
    Views:
    1,104
    news.frontiernet.net
    Apr 16, 2004
  2. Kate
    Replies:
    4
    Views:
    620
  3. Kate
    Replies:
    1
    Views:
    440
    Oli Filth
    Feb 19, 2005
  4. Nospam
    Replies:
    6
    Views:
    460
    Bergamot
    Mar 23, 2007
  5. lawrence
    Replies:
    13
    Views:
    285
    Thomas 'PointedEars' Lahn
    Sep 4, 2004
Loading...

Share This Page