DIV wrapping problem

Discussion in 'HTML' started by Matt White, Mar 5, 2009.

  1. Matt White

    Matt White Guest

    I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    div1 is the width of the screen and div2 is a fixed width. How do I
    get div3 to dynamically expand to fill the space to the right of div2?
    Right now I can only seem to get div3 to float up against div2, but I
    don't know how to make it as wide as the remaining space next to div2.
    I want the result I've so artistically illustrated in diagram 1 but I
    can only seem to get diagram 2.

    _______________________ screen width
    ______________________
    | | |
    | | | diagram 1
    |_____|________________|

    _____________
    | | |
    | | | diagram 2
    |_____|_______|

    The simple code I'm using is at: http://pastie.org/407824. Any help
    would be appreciated! Thanks!
    Matt White, Mar 5, 2009
    #1
    1. Advertising

  2. On 2009-03-05, Matt White wrote:
    > I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    > div1 is the width of the screen and div2 is a fixed width. How do I
    > get div3 to dynamically expand to fill the space to the right of div2?


    By not giving it a width.

    > Right now I can only seem to get div3 to float up against div2, but I
    > don't know how to make it as wide as the remaining space next to div2.
    > I want the result I've so artistically illustrated in diagram 1 but I
    > can only seem to get diagram 2.
    >
    > _______________________ screen width
    > ______________________
    >| | |
    >| | | diagram 1
    >|_____|________________|
    >
    > _____________
    >| | |
    >| | | diagram 2
    >|_____|_______|


    When drawing ASCII art, please use a fixed-wdith font.

    > The simple code I'm using is at: http://pastie.org/407824. Any help
    > would be appreciated! Thanks!


    A URL to the real page would be more helpful.

    Make sure that it validates (at <http://validator.w3.org>) before
    posting it. (The code you referred to lacks a Doctype.)

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Mar 5, 2009
    #2
    1. Advertising

  3. Matt White

    rf Guest

    Matt White wrote:
    > I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    > div1 is the width of the screen and div2 is a fixed width. How do I
    > get div3 to dynamically expand to fill the space to the right of div2?
    > Right now I can only seem to get div3 to float up against div2, but I
    > don't know how to make it as wide as the remaining space next to div2.
    > I want the result I've so artistically illustrated in diagram 1 but I
    > can only seem to get diagram 2.
    >
    > _______________________ screen width
    > ______________________
    >> | |
    >> | | diagram 1
    >> _____|________________|

    >
    > _____________
    >> | |
    >> | | diagram 2
    >> _____|_______|

    >
    > The simple code I'm using is at: http://pastie.org/407824. Any help
    > would be appreciated! Thanks!


    Post a URL to the page, not a picture of the code.


    Don't float div3. Give it a left margin of 150px;
    rf, Mar 5, 2009
    #3
  4. Matt White

    asdf Guest

    "rf" <> wrote in message
    news:9MFrl.25270$...
    > Matt White wrote:
    >> I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    >> div1 is the width of the screen and div2 is a fixed width. How do I
    >> get div3 to dynamically expand to fill the space to the right of div2?
    >> Right now I can only seem to get div3 to float up against div2, but I
    >> don't know how to make it as wide as the remaining space next to div2.
    >> I want the result I've so artistically illustrated in diagram 1 but I
    >> can only seem to get diagram 2.
    >>
    >> _______________________ screen width
    >> ______________________
    >>> | |
    >>> | | diagram 1
    >>> _____|________________|

    >>
    >> _____________
    >>> | |
    >>> | | diagram 2
    >>> _____|_______|

    >>
    >> The simple code I'm using is at: http://pastie.org/407824. Any help
    >> would be appreciated! Thanks!

    >
    > Post a URL to the page, not a picture of the code.
    >
    >
    > Don't float div3. Give it a left margin of 150px;
    >


    Matt,

    Try this... it ain't perfect, it ain't purdy, it's kinda minimalist, but it
    should give you a good starting point.

    Pay particular attention to the 'width' of the left column, and the
    'margin-left' of the right column.

    Copy the following into a new html doc and start playing! Hope it helps.

    [start markup]

    <!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>DIV Test</title>
    <style type="text/css">
    <!--
    ..leftcolumn {
    float: left;
    width: 12em;
    }
    ..rightcolumn {
    margin-left: 12em;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div class="leftcolumn">left column contents left column contents left
    column contents left column contents left column contents left column
    contents</div>
    <div class="rightcolumn">right column contents right column contents right
    column contents right column contents right column contents right column
    contents right column contents right column contents right column contents
    right column contents right column contents right column contents right
    column contents right column contents right column contents</div>
    </div>
    </body>
    </html>

    [end markup]
    asdf, Mar 5, 2009
    #4
  5. Matt White

    Matt White Guest

    On Mar 4, 7:01 pm, "asdf" <> wrote:
    > "rf" <> wrote in message
    >
    > news:9MFrl.25270$...
    >
    >
    >
    > > Matt White wrote:
    > >> I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    > >> div1 is the width of the screen and div2 is a fixed width. How do I
    > >> get div3 to dynamically expand to fill the space to the right of div2?
    > >> Right now I can only seem to get div3 to float up against div2, but I
    > >> don't know how to make it as wide as the remaining space next to div2.
    > >> I want the result I've so artistically illustrated in diagram 1 but I
    > >> can only seem to get diagram 2.

    >
    > >> _______________________ screen width
    > >> ______________________
    > >>>         |                            |
    > >>>         |                            | diagram 1
    > >>> _____|________________|

    >
    > >> _____________
    > >>>         |            |
    > >>>         |            | diagram 2
    > >>> _____|_______|

    >
    > >> The simple code I'm using is at:http://pastie.org/407824. Any help
    > >> would be appreciated! Thanks!

    >
    > > Post a URL to the page, not a picture of the code.

    >
    > > Don't float div3. Give it a left margin of 150px;

    >
    > Matt,
    >
    > Try this... it ain't perfect, it ain't purdy, it's kinda minimalist, but it
    > should give you a good starting point.
    >
    > Pay particular attention to the 'width' of the left column, and the
    > 'margin-left' of the right column.
    >
    > Copy the following into a new html doc and start playing! Hope it helps.
    >
    > [start markup]
    >
    > <!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>DIV Test</title>
    > <style type="text/css">
    > <!--
    > .leftcolumn {
    >  float: left;
    >  width: 12em;}
    >
    > .rightcolumn {
    >  margin-left: 12em;}
    >
    > -->
    > </style>
    > </head>
    > <body>
    > <div id="wrapper">
    >   <div class="leftcolumn">left column contents left column contents left
    > column contents left column contents left column contents left column
    > contents</div>
    >   <div class="rightcolumn">right column contents right column contents right
    > column contents right column contents right column contents right column
    > contents right column contents right column contents right column contents
    > right column contents right column contents right column contents right
    > column contents right column contents right column contents</div>
    > </div>
    > </body>
    > </html>
    >
    > [end markup]


    Brilliant. Works beautifully! Thanks!
    Matt White, Mar 5, 2009
    #5
  6. Matt White

    rf Guest

    Jim Moe wrote:
    > On 03/04/09 06:07 pm, Chris F.A. Johnson wrote:
    >> On 2009-03-05, Matt White wrote:
    >>> I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    >>> div1 is the width of the screen and div2 is a fixed width. How do I
    >>> get div3 to dynamically expand to fill the space to the right of
    >>> div2?

    >>
    >> By not giving it a width.
    >>

    > That works only if there is enough content.


    A div well allways be as wide as its continer, unless specified otherwise.
    rf, Mar 5, 2009
    #6
  7. Matt White

    dorayme Guest

    In article <ZUYrl.25455$>,
    "rf" <> wrote:

    > A div well allways be as wide as its continer, unless specified otherwise.


    Does "otherwise specified" include it merely being floated?

    --
    dorayme
    dorayme, Mar 5, 2009
    #7
  8. Matt White

    rf Guest

    dorayme wrote:
    > In article <ZUYrl.25455$>,
    > "rf" <> wrote:
    >
    >> A div well allways be as wide as its continer, unless specified
    >> otherwise.

    >
    > Does "otherwise specified" include it merely being floated?


    Yes :)
    rf, Mar 5, 2009
    #8
  9. Matt White

    dorayme Guest

    In article <uvZrl.25459$>,
    "rf" <> wrote:

    > dorayme wrote:
    > > In article <ZUYrl.25455$>,
    > > "rf" <> wrote:
    > >
    > >> A div well allways be as wide as its continer, unless specified
    > >> otherwise.

    > >
    > > Does "otherwise specified" include it merely being floated?

    >
    > Yes :)


    You sure you are not forgetting the shrink-to-fit behaviour of floats?

    In

    <div style="overflow: hidden; border: 1px solid;">
    <div style="float: left; background: yellow;">Not very wide content</div>
    </div>

    the yellow extends only to cover the text.

    --
    dorayme
    dorayme, Mar 6, 2009
    #9
  10. Matt White

    rf Guest

    dorayme wrote:
    > In article <uvZrl.25459$>,
    > "rf" <> wrote:
    >
    >> dorayme wrote:
    >>> In article <ZUYrl.25455$>,
    >>> "rf" <> wrote:
    >>>
    >>>> A div well allways be as wide as its continer, unless specified
    >>>> otherwise.
    >>>
    >>> Does "otherwise specified" include it merely being floated?

    >>
    >> Yes :)

    >
    > You sure you are not forgetting the shrink-to-fit behaviour of floats?


    Er, by yes I mean that: yes, I had forgotton that this thread was about
    floated divs and yes floating a div *will* affect it's width, specifically
    shrink to fit. So "otherwise specified" indirectly includes floating.

    IOW you caught me out :)
    rf, Mar 6, 2009
    #10
  11. Matt White

    asdf Guest

    "Matt White" <> wrote in message
    news:...
    On Mar 4, 7:01 pm, "asdf" <> wrote:
    > "rf" <> wrote in message
    >
    > news:9MFrl.25270$...
    >
    >
    >
    > > Matt White wrote:
    > >> I have a container DIV (div1) that contains 2 DIVs (div2 and div3).
    > >> div1 is the width of the screen and div2 is a fixed width. How do I
    > >> get div3 to dynamically expand to fill the space to the right of div2?
    > >> Right now I can only seem to get div3 to float up against div2, but I
    > >> don't know how to make it as wide as the remaining space next to div2.
    > >> I want the result I've so artistically illustrated in diagram 1 but I
    > >> can only seem to get diagram 2.

    >
    > >> _______________________ screen width
    > >> ______________________
    > >>> | |
    > >>> | | diagram 1
    > >>> _____|________________|

    >
    > >> _____________
    > >>> | |
    > >>> | | diagram 2
    > >>> _____|_______|

    >
    > >> The simple code I'm using is at:http://pastie.org/407824. Any help
    > >> would be appreciated! Thanks!

    >
    > > Post a URL to the page, not a picture of the code.

    >
    > > Don't float div3. Give it a left margin of 150px;

    >
    > Matt,
    >
    > Try this... it ain't perfect, it ain't purdy, it's kinda minimalist, but
    > it
    > should give you a good starting point.
    >
    > Pay particular attention to the 'width' of the left column, and the
    > 'margin-left' of the right column.
    >
    > Copy the following into a new html doc and start playing! Hope it helps.
    >
    > [start markup]
    >
    > <!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>DIV Test</title>
    > <style type="text/css">
    > <!--
    > .leftcolumn {
    > float: left;
    > width: 12em;}
    >
    > .rightcolumn {
    > margin-left: 12em;}
    >
    > -->
    > </style>
    > </head>
    > <body>
    > <div id="wrapper">
    > <div class="leftcolumn">left column contents left column contents left
    > column contents left column contents left column contents left column
    > contents</div>
    > <div class="rightcolumn">right column contents right column contents right
    > column contents right column contents right column contents right column
    > contents right column contents right column contents right column contents
    > right column contents right column contents right column contents right
    > column contents right column contents right column contents</div>
    > </div>
    > </body>
    > </html>
    >
    > [end markup]


    >Brilliant. Works beautifully! Thanks!


    You are more than welcome, my friend!
    asdf, Mar 6, 2009
    #11
  12. Matt White

    dorayme Guest

    dorayme, Mar 6, 2009
    #12
  13. Matt White

    asdf Guest

    "Jim Moe" <> wrote in message
    news:...
    > On 03/05/09 07:52 pm, dorayme wrote:
    >>
    >> [huge unnecessary quote with added complete version of King James
    >> version of Bible]
    >>
    >>> You are more than welcome, my friend!

    >>
    >> http://www.netmeister.org/news/learn2quote.html
    >>

    > Pot. Kettle. Black.
    >
    > --
    > jmm (hyphen) list (at) sohnen-moe (dot) com
    > (Remove .AXSPAMGN for email)


    Haha... you got in first ;)
    asdf, Mar 6, 2009
    #13
  14. Matt White

    dorayme Guest

    In article
    <49b0bc4c$0$4207$>,
    "asdf" <> wrote:

    > "Jim Moe" <> wrote in message
    > news:...
    > > On 03/05/09 07:52 pm, dorayme wrote:
    > >>
    > >> [huge unnecessary quote with added complete version of King James
    > >> version of Bible]
    > >>
    > >>> You are more than welcome, my friend!
    > >>
    > >> http://www.netmeister.org/news/learn2quote.html
    > >>

    > > Pot. Kettle. Black.
    > >
    > > --
    > > jmm (hyphen) list (at) sohnen-moe (dot) com
    > > (Remove .AXSPAMGN for email)

    >
    > Haha... you got in first ;)


    Hey asdf, if I have made a mistake in this, I appoint you Chief Pointer,
    and will pay a small bonus for each example so I can improve in this
    regard. When you point out an example, point it without bothering to
    quote the whole thing. Quoting is an art and not a science and we all
    make a few mistakes. Sometimes we too much, sometimes we too little. But
    there is a difference between this and not even bothering to try or
    being totally oblivious of JK's excellent insistence on such things for
    the good order and management of Usenet.

    O no! You two guys are not meaning to express exasperation with...
    with.... with... me on the crime of *babbling*, the other JK regular
    point of admonishment?

    That's not fair for either of two reasons:

    (1) My alleged babbling is a healthy loquacity.

    (2) It is a different crime to "clueless full-quoting" and so the
    pot/kettle remark is off the mark.

    <g>

    ----------------
    asdf, please remove quoting sigs.

    --
    dorayme
    dorayme, Mar 6, 2009
    #14
  15. Matt White

    asdf Guest

    "dorayme" <> wrote in message
    news:...
    > In article
    > <49b0bc4c$0$4207$>,
    > "asdf" <> wrote:
    >
    >> "Jim Moe" <> wrote in message
    >> news:...
    >> > On 03/05/09 07:52 pm, dorayme wrote:
    >> >>
    >> >> [huge unnecessary quote with added complete version of King James
    >> >> version of Bible]
    >> >>
    >> >>> You are more than welcome, my friend!
    >> >>
    >> >> http://www.netmeister.org/news/learn2quote.html
    >> >>
    >> > Pot. Kettle. Black.
    >> >
    >> > --
    >> > jmm (hyphen) list (at) sohnen-moe (dot) com
    >> > (Remove .AXSPAMGN for email)

    >>
    >> Haha... you got in first ;)

    >
    > Hey asdf, if I have made a mistake in this, I appoint you Chief Pointer,
    > and will pay a small bonus for each example so I can improve in this
    > regard. When you point out an example, point it without bothering to
    > quote the whole thing. Quoting is an art and not a science and we all
    > make a few mistakes. Sometimes we too much, sometimes we too little. But
    > there is a difference between this and not even bothering to try or
    > being totally oblivious of JK's excellent insistence on such things for
    > the good order and management of Usenet.
    >
    > O no! You two guys are not meaning to express exasperation with...
    > with.... with... me on the crime of *babbling*, the other JK regular
    > point of admonishment?
    >
    > That's not fair for either of two reasons:
    >
    > (1) My alleged babbling is a healthy loquacity.
    >
    > (2) It is a different crime to "clueless full-quoting" and so the
    > pot/kettle remark is off the mark.
    >
    > <g>
    >
    > ----------------
    > asdf, please remove quoting sigs.
    >
    > --
    > dorayme


    Yawn.
    asdf, Mar 6, 2009
    #15
  16. Matt White

    dorayme Guest

    In article <>,
    Jim Moe <> wrote:

    > I rest my case.


    Pity it is not clear what your case is or rather what it *was* when you
    responded with the 'pot kettle' remark (which I was not offended by,
    just curious as to quite what my crime was, a quoting crime or a
    babbling crime. These are quite distinct criminal offences Jim and when
    I am stopped for arrest - as I am regularly - I am mildly curious of the
    actual charge.

    ....
    > I have no opinion about loquacious rambling.


    Your expression suggest you do. I understand. I have a lot of evidence
    that I am not usually any sensible person's cup of tea.

    > I have come to ignore posters who cause me to scroll through all that
    > *UNNECESSARY* quoted text (see above) to get to a (usually succinct) response.


    Now I am even more confused. You pot-kettled me. Now you seem to be
    saying something about poor asdf (I say "poor" because he is very very
    tired, he was yawning in his last reply to me. <g>)

    --
    dorayme
    dorayme, Mar 6, 2009
    #16
    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. Replies:
    5
    Views:
    8,866
    Jukka K. Korpela
    Mar 7, 2006
  2. Replies:
    5
    Views:
    656
    Neredbojias
    Mar 2, 2008
  3. K Viltersten

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

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    728
  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:
    178
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    298
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page