floated P is overstepping its containing DIV's boundaries

slowly going insane here

[Don_Hoagie]

I'm at a loss... I've replaced or moved nearly every tag in this code, and still the containing DIV will only go as far down as its un-floated content... the floated <p>, when longer in height than the rest of the copy, breaks through the bottom of the containing div (which does not have any height attributes) and keeps going. Surely there's some fundamental thing i'm doing wrong... but the code validates and I can't see what the problem could be. Thanks for any assistance.

By the way, this does work fine in IE6... so don't go testing it in that browser or anything.

#container {
position: relative;
top: 0;
left: 0;
text-align: left;
border-left: 1px solid #5b6c82;
border-right: 1px solid #5b6c82;
width: 748px;
}

.containerpad {
padding: 35px 38px 25px 40px;
}

.copy {
font-size: 12px;
line-height: 14px;
}

.items {
float: right;
border: 1px solid #748aa6;
background-color: #101316;
margin-left: 25px;
margin-bottom: 15px;
padding: 20px;
text-align: right;
}

//////

<div id="container">
<div class="containerpad">
<div class="copy">
<p class="items">
sdgsdagasd<br />
adgbsadbasd<br />
adgbsadbasd<br />
adgbsadbasd<br />
adgbsadbasd<br />
adgbsadbasd<br />
adgbsadbasd</p>

<h1>Testing.</h1>
<p>Testing blahblah etc.</p>

</div>
</div>
</div>

[Fotiman]

This is, as odd as it may seem now, actually the correct behavior. I don't remember the exact reason, but you can probably get what you're looking for by making your containing item floated as well. Thus, your floats are contained within your float.

You might also try reading about One True Layout [positioniseverything.net] (as I think this might be discussed in that article as well... could be wrong though).

[createErrorMsg]

As Fotiman says, this is the correct behavior for floats. When an element is floated, it is removed from the normal document flow and moved in it's float direction until it hits either it's container edge or another float. Being removed from the flow then prevents the float from interacting with it's parent. It therefor cannot have an effect upon the height of the parent container.

There are many ways to make a parent element contain a float. Which to use depends largely upon the specific needs of your layout.

Fotimon mentioned the one that happens to be my method of choice: floating the parent. A floated element will expand to contain it's floated children. This is a simple fix, however some layouts can't handle a floated parent element, so another method is needed.

One is to add a clearing element to the bottom of the parent container, as in...

html:
<div id="parent">
<div id="the_float"></div>
<br class="clear" />
</div><!--close parent-->

css:
#the_float{float:left;}
br.clear{clear:left;}

Because an element set to clear in the same direction as a preceeding float is not allowed to sit next to that float, it is moved down until it clears the float before being rendered. Because this clearing element is still in the document flow, however, it is still able to influence the parent's height and drags the container's borders and backgrounds down with it.

This can also be done without the extra markup of a clearing element. See How to Clear Floats WIthout Structural Markup [positioniseverything.net] for more details.

Finally, you can contain floats by setting the overflow property on the parent to "auto," or anything other than "visible." There are some problems with this in FF browsers, so beware. See this thread [webmasterworld.com] for more details.

Personally, I tend to stick with the first option whenever possible, and fall back on the second when floating the parent just doesn't work.

cEM

[Don_Hoagie]

Nifty, thanks to both of you... I will give both of these techniques a try. Looks like it couldn't hurt for me to re-evaluate what I thought I knew about floats as well.

[Don_Hoagie]

Floating the container solved the problem, as you both already knew... thanks! But, humor me here... what would be the reason for the content within the container not being accessible now? None of the links are clickable, and you don't get the usual "I" cursor when moving over the text. Again, works fine in IE6 only.

Thanks for any assistance

[createErrorMsg]

None of the links are clickable, and you don't get the usual "I" cursor when moving over the text

This is usually the result of having something positioned via position:absolute or relative overtop of the text in question. Double check to be sure you haven't overlapped the container with another "layer."

cEM

[Don_Hoagie]

That was my expectation as well... hmm, i'm sure that's it; I guess i'll go through the code with a finer comb this time... thanks again