DIV question

Discussion in 'HTML' started by plenty900@yahoo.com, Jan 31, 2008.

  1. Guest

    Hi folks,

    I've got some HTML like this:

    <DIV>
    <DIV style="float: left; width: 40"> text </DIV>
    <DIV style="float: left; width: 40"> text </DIV>
    <DIV style="float: left; width: 40"> text </DIV>
    </DIV>
    <DIV>
    <DIV style="float: left; width: 40"> text </DIV>
    <DIV style="float: left; width: 40"> text </DIV>
    <DIV style="float: left; width: 40"> text </DIV>
    </DIV>

    I'm finding that the second outer DIV is appearing
    to the right of the first outer DIV.

    My intention is to have the 2nd outer DIV
    appear below the first. I had assumed this
    would happen because its position is static
    by default.

    Can someone explain why it behaves
    the way it does?

    Thanks.
     
    , Jan 31, 2008
    #1
    1. Advertising

  2. Randy Webb Guest

    said the following on 1/30/2008 7:51 PM:
    > Hi folks,
    >
    > I've got some HTML like this:
    >
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    >
    > I'm finding that the second outer DIV is appearing
    > to the right of the first outer DIV.
    >
    > My intention is to have the 2nd outer DIV
    > appear below the first. I had assumed this
    > would happen because its position is static
    > by default.
    >
    > Can someone explain why it behaves
    > the way it does?


    I can. And I will if you explain what this has to do with Javascript.

    float:left takes it out of the flow of the document. Your outer divs, in
    this instance, are useless.
    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jan 31, 2008
    #2
    1. Advertising

  3. rf Guest

    <> wrote in message
    news:...
    > Hi folks,
    >
    > I've got some HTML like this:
    >
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    >
    > I'm finding that the second outer DIV is appearing
    > to the right of the first outer DIV.


    No it isn't. It is below the first div.

    What you see is the *contents* of the second div appearing to the right of
    the *contents* of the first div. These two lots of *contents* have been
    removed from the normal flow, because they are floated, and will naturally
    stack up next to each other. Turn borders on (in different colours) for the
    various divs and you will see what is hapenning.

    > My intention is to have the 2nd outer DIV
    > appear below the first.


    Give the second div style="clear: both:"

    --
    Richard.
     
    rf, Jan 31, 2008
    #3
  4. Guest

    On Jan 30, 7:51 pm, wrote:
    > Hi folks,
    >
    > I've got some HTML like this:
    >
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>


    To answer my own question, the second outer DIV needs to have a
    "clear: left" in its style.
     
    , Jan 31, 2008
    #4
  5. dorayme Guest

    In article
    <
    m>,
    wrote:

    > Hi folks,
    >
    > I've got some HTML like this:
    >
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > <DIV style="float: left; width: 40"> text </DIV>
    > </DIV>
    >
    > I'm finding that the second outer DIV is appearing
    > to the right of the first outer DIV.
    >
    > My intention is to have the 2nd outer DIV
    > appear below the first. I had assumed this
    > would happen because its position is static
    > by default.
    >
    > Can someone explain why it behaves
    > the way it does?



    The wrapper divs have no content. They do not see their floated
    children and therefore grow no height for them. if you want to
    see them spring to life, try a background different for each and
    put at least a full stop inside them. The full stop will be an
    inline element in the regular flow triggering content and height.

    Your:

    <div style="background: #fcc;">...just floated divs here ...</div>
    <div style="background: #cff;">...just floated divs here ...</div>

    is not that different to:

    <div style="background: #fcc;"></div>
    <div style="background: #cff;"></div>

    as far as these wrappers are concerned.

    And different to:

    <div style="background: #fcc;">.</div>
    <div style="background: #cff;">.</div>


    I invite you to read:

    <http://netweaver.com.au/floatHouse/>

    if you have time and patience.

    --
    dorayme
     
    dorayme, Jan 31, 2008
    #5
  6. dorayme Guest

    In article <4h9oj.9214$>,
    "rf" <> wrote:

    >
    > <> wrote in message
    > news:...
    > > Hi folks,
    > >
    > > I've got some HTML like this:
    > >
    > > <DIV>
    > > <DIV style="float: left; width: 40"> text </DIV>
    > > <DIV style="float: left; width: 40"> text </DIV>
    > > <DIV style="float: left; width: 40"> text </DIV>
    > > </DIV>
    > > <DIV>
    > > <DIV style="float: left; width: 40"> text </DIV>
    > > <DIV style="float: left; width: 40"> text </DIV>
    > > <DIV style="float: left; width: 40"> text </DIV>
    > > </DIV>
    > >
    > > I'm finding that the second outer DIV is appearing
    > > to the right of the first outer DIV.

    >
    > No it isn't. It is below the first div.
    >
    > What you see is the *contents* of the second div appearing to the right of
    > the *contents* of the first div. These two lots of *contents* have been
    > removed from the normal flow, because they are floated, and will naturally
    > stack up next to each other. Turn borders on (in different colours) for the
    > various divs and you will see what is hapenning.


    Well, fair enough in a way. If just:

    <div style="border:4px solid;">
    <div style="border:4px solid red;">

    He will see the borders stack ok. And this does hint at how the
    divs would stack if they had any content.


    But perhaps OP will be puzzled by quite how the floats appear in:


    <div style="border:4px solid;">
    <div style="float: left; width: 40"> text </div>
    <div style="float: left; width: 40"> text </div>
    <div style="float: left; width: 40"> text </div>
    </div>
    <div style="border:4px solid red;">
    <div style="float: left; width: 40"> text </div>
    <div style="float: left; width: 40"> text </div>
    <div style="float: left; width: 40"> text </div>
    </div>

    They appear, as they should, under their respective parents. The
    parent, having no actual height, nevertheless have borders that
    have height and they must clear these borders respectively.

    The floats not only relate to each other within a family but as a
    family (of 3 siblings at least) they relate to the other family
    of 3 siblings - the second set not able to get to the far left,
    snagging on the first triplet.

    --
    dorayme
     
    dorayme, Jan 31, 2008
    #6
  7. dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > the second set not able to get to the far left,
    > snagging on the first triplet.


    the second set not able to get to the far left *of their own
    parent*, snagging on the first triplet.

    --
    dorayme
     
    dorayme, Jan 31, 2008
    #7
  8. wrote:
    > Hi folks,
    >


    Just because no one else mentioned it the style property is invalid.

    > I've got some HTML like this:
    >
    > <DIV>
    > <DIV style="float: left; width: 40"> text </DIV>

    ^^
    No units specified where they are required for CSS

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 31, 2008
    #8
  9. Ben C Guest

    On 2008-01-31, rf <> wrote:
    >
    ><> wrote in message
    > news:...
    >> Hi folks,
    >>
    >> I've got some HTML like this:
    >>
    >> <DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>
    >> </DIV>
    >> <DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>
    >> </DIV>
    >>
    >> I'm finding that the second outer DIV is appearing
    >> to the right of the first outer DIV.

    >
    > No it isn't. It is below the first div.


    In a sense, although both divs have zero height, so they are in this
    case also on top of each other, which is a special case of below.

    As dorayme points out, the floats in each div do always go at least
    below the the top inside padding edge of the block they're in.

    It's only because, with no borders or padding on the blocks, the top
    inside padding edges of the two divs are in exactly the same position
    that the floats are all aligned vertically with each other.
     
    Ben C, Jan 31, 2008
    #9
  10. rf Guest

    "Ben C" <> wrote in message
    news:...
    > On 2008-01-31, rf <> wrote:
    >>
    >><> wrote in message
    >> news:...
    >>> Hi folks,
    >>>
    >>> I've got some HTML like this:
    >>>
    >>> <DIV>
    >>> <DIV style="float: left; width: 40"> text </DIV>
    >>> <DIV style="float: left; width: 40"> text </DIV>
    >>> <DIV style="float: left; width: 40"> text </DIV>
    >>> </DIV>
    >>> <DIV>
    >>> <DIV style="float: left; width: 40"> text </DIV>
    >>> <DIV style="float: left; width: 40"> text </DIV>
    >>> <DIV style="float: left; width: 40"> text </DIV>
    >>> </DIV>
    >>>
    >>> I'm finding that the second outer DIV is appearing
    >>> to the right of the first outer DIV.

    >>
    >> No it isn't. It is below the first div.

    >
    > In a sense, although both divs have zero height, so they are in this
    > case also on top of each other, which is a special case of below.
    >
    > As dorayme points out, the floats in each div do always go at least
    > below the the top inside padding edge of the block they're in.
    >
    > It's only because, with no borders or padding on the blocks, the top
    > inside padding edges of the two divs are in exactly the same position
    > that the floats are all aligned vertically with each other.


    Which is why switching on some borders makes everything self evident.

    --
    Richard.
     
    rf, Jan 31, 2008
    #10
  11. Andy Dingley Guest

    On 31 Jan, 04:17, "Jonathan N. Little" <> wrote:

    > > <DIV style="float: left; width: 40"> text </DIV>

    > ^^
    > No units specified where they are required for CSS


    IE will auto-correct for that error when in quirks mode. Then if you
    ever swap doctype to a decent one, it'll stop doing that and the whole
    layout breaks into pieces. Nasty. Particularly nasty when a PHB sees
    this as an excuse for "Standards, strict mode and CSS doesn't work as
    well as 3.2 does" 8-(
     
    Andy Dingley, Jan 31, 2008
    #11
  12. In alt.html, Jonathan N. Little wrote:

    > wrote:
    >> Hi folks,

    >
    > Just because no one else mentioned it the style property is invalid.
    >
    >> I've got some HTML like this:
    >>
    >> <DIV>
    >> <DIV style="float: left; width: 40"> text </DIV>

    > ^^
    > No units specified where they are required for CSS


    Yep. I was going to post, and forgot, asking: "40 hobnobs?"

    --
    -bts
    -Friends don't let friends drive Vista
     
    Beauregard T. Shagnasty, Jan 31, 2008
    #12
  13. dorayme Guest

    In article <wFgoj.9376$>,
    "rf" <> wrote:

    >
    > "Ben C" <> wrote in message
    > news:...
    > > On 2008-01-31, rf <> wrote:
    > >>
    > >><> wrote in message
    > >> news:...
    > >>> Hi folks,
    > >>>
    > >>> I've got some HTML like this:
    > >>>
    > >>> <DIV>
    > >>> <DIV style="float: left; width: 40"> text </DIV>
    > >>> <DIV style="float: left; width: 40"> text </DIV>
    > >>> <DIV style="float: left; width: 40"> text </DIV>
    > >>> </DIV>
    > >>> <DIV>
    > >>> <DIV style="float: left; width: 40"> text </DIV>
    > >>> <DIV style="float: left; width: 40"> text </DIV>
    > >>> <DIV style="float: left; width: 40"> text </DIV>
    > >>> </DIV>
    > >>>
    > >>> I'm finding that the second outer DIV is appearing
    > >>> to the right of the first outer DIV.
    > >>
    > >> No it isn't. It is below the first div.

    > >
    > > In a sense, although both divs have zero height, so they are in this
    > > case also on top of each other, which is a special case of below.
    > >
    > > As dorayme points out, the floats in each div do always go at least
    > > below the the top inside padding edge of the block they're in.
    > >
    > > It's only because, with no borders or padding on the blocks, the top
    > > inside padding edges of the two divs are in exactly the same position
    > > that the floats are all aligned vertically with each other.

    >
    > Which is why switching on some borders makes everything self evident.


    Switching on some borders can also puzzle and confuse OP without
    an understanding of a few issues that surround this matter.

    <http://netweaver.com.au/alt/contentlessDivs.html>

    would be sure to confuse (alter browser text size up and down).

    And while:

    <http://netweaver.com.au/alt/contentlessDivs.html2> brings out
    some things more clearly, it would not be obvious to many people
    what exactly these things are.

    --
    dorayme
     
    dorayme, Jan 31, 2008
    #13
    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. Josef K.

    <label><div></div></label> allowed?

    Josef K., May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    13,758
    Josef K.
    May 22, 2005
  2. dunnil
    Replies:
    1
    Views:
    750
    Neredbojias
    Feb 5, 2006
  3. K Viltersten

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

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

Share This Page