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