Block DIV within a block DIV?

Discussion in 'HTML' started by Noozer, Jan 6, 2005.

  1. Noozer

    Noozer Guest

    When I place a DIV within a DIV, the outer DIV does not take into account
    the size of the inner DIV. Is this normal and what can I do to fix it?

    With the code below, I would expect a grey block with a line of text at the
    top "This Group". Within the grey block, below the "This Group" text I would
    expect a red block at the left, a green block to the right of this and then
    a blue block to the right of that, with each blocks height tall enough to
    contain it's content. Below this I'd expect to see more of the grey block
    and "--- The End ---"

    What I see in both IE and Firefox is a single grey bar for "This Group" that
    does not extend around the other DIVs or the "---- The End ---" text, even
    though these are all contained within the main DIV.

    If my expectations are wrong, can someone explain why? Is there a way to
    obtain what I want?

    <html>
    <head>
    </head>
    <body>
    <div id="Maingroup">
    <span class="SectionHead" style="display: block; padding: 2px;
    background-color:#888; float: none;">This Group</span>
    <div id="Group1" style="background-color:#F00; float: left;">
    <p>Some stuff here</p>
    <p>More stuff</p>
    </div>
    <div id="Group2" style="background-color:#0F0; float: left;">
    More stuff here
    </div>
    <div id="Group3" style="background-color:#00F; float: left;">
    Even more stuff
    </div>
    <span class="SectionFoot"> --- The End --- </span>
    <div>
    </body>
    </html>
    Noozer, Jan 6, 2005
    #1
    1. Advertising

  2. Noozer

    Steve Pugh Guest

    "Noozer" <> wrote:

    >When I place a DIV within a DIV, the outer DIV does not take into account
    >the size of the inner DIV. Is this normal and what can I do to fix it?


    Normally child elements extend the size of the parent element but
    sometimes they don't (if the parent has a fixed size - except in
    broken IE) and sometimes a child isn't actually considered to be
    inside the parent (if the child is floated or absolutely positioned).

    >What I see in both IE and Firefox is a single grey bar for "This Group" that
    >does not extend around the other DIVs or the "---- The End ---" text, even
    >though these are all contained within the main DIV.


    > <div id="Maingroup">
    > <span class="SectionHead" style="display: block; padding: 2px;
    >background-color:#888; float: none;">This Group</span>
    > <div id="Group1" style="background-color:#F00; float: left;">
    > <p>Some stuff here</p>
    > <p>More stuff</p>
    > </div>
    > <div id="Group2" style="background-color:#0F0; float: left;">
    > More stuff here
    > </div>
    > <div id="Group3" style="background-color:#00F; float: left;">
    > Even more stuff
    > </div>
    > <span class="SectionFoot"> --- The End --- </span>
    > <div>


    The three floated divs are taken outside of the document flow, hence
    they do not contribute to the size of the parent div. Add a clear to
    the SectionFoot.

    Steve
    Steve Pugh, Jan 6, 2005
    #2
    1. Advertising

  3. Noozer

    Noozer Guest

    "Steve Pugh" <> wrote in message
    news:...
    > "Noozer" <> wrote:
    >
    > >When I place a DIV within a DIV, the outer DIV does not take into account
    > >the size of the inner DIV. Is this normal and what can I do to fix it?

    >
    > Normally child elements extend the size of the parent element but
    > sometimes they don't (if the parent has a fixed size - except in
    > broken IE) and sometimes a child isn't actually considered to be
    > inside the parent (if the child is floated or absolutely positioned).


    Thanks! Once I floated the main DIV the others fell into place, at least in
    IE, and the output looks like what I was shooting for. Still doesn't work in
    Firefox. This is for an intranet page so I can count on only one browser to
    be used.

    Definately not a good thing that I can't stack DIV's side by side without
    floating them and pulling them out of their container DIV.

    Thanks again
    Noozer, Jan 6, 2005
    #3
  4. Noozer

    Mitja Guest

    On Thu, 06 Jan 2005 20:55:40 GMT, Noozer <> wrote:

    > Definately not a good thing that I can't stack DIV's side by side without
    > floating them and pulling them out of their container DIV.


    You must have missed Steve's tip: to extend the main div, set clear:left
    to the "the end" div. This will put that div below the floated ones. But
    since it itself is not floated, the container div will stretch to
    accomodate it.


    --
    Mitja
    Mitja, Jan 6, 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. Tom

    div within div

    Tom, Jan 14, 2005, in forum: HTML
    Replies:
    10
    Views:
    973
    Andy Dingley
    Jan 15, 2005
  2. stan
    Replies:
    0
    Views:
    437
  3. morrell
    Replies:
    1
    Views:
    936
    roy axenov
    Oct 10, 2006
  4. Steve Richter

    centering div within a div

    Steve Richter, Jul 16, 2007, in forum: ASP .Net
    Replies:
    4
    Views:
    468
    Brandon Gano
    Jul 17, 2007
  5. Thufir
    Replies:
    1
    Views:
    127
    7stud --
    Oct 20, 2007
Loading...

Share This Page