Block DIV within a block DIV?

N

Noozer

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>
 
S

Steve Pugh

Noozer said:
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
 
N

Noozer

Steve Pugh said:
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
 
M

Mitja

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top