Html/css problems with float test

Get Started
1

i floated box1 to the left
i expected box2 to sit on top of box1
-and it does, because i can see the margins-
But the weird thing, is that the text inside box2 does not appear inside box2

The text which should be inside of box2 -as per the html-
shows inside box3 (overlaying the box3 text)

using firefox 3.0

can anybody try the code below??


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<style>
*
{
	margin:0;
	padding:0;
}

#box0
{
	width:  150px;
	height: 100px;
	border: 1px solid purple;

}

#containElement
{

	width:  700px;
	background-color: yellow;
	border: 1px solid black;

}


#box1
{

	width:  150px;
	height: 100px;
	border: 1px solid red;
	color: red;
	float: left;

}

#box2
{


	width:  150px;
	height: 100px;
	border: 2px solid lime;
	color: purple;

}

#box3
{

	width:  150px;
	height: 100px;
	border: 1px solid blue;
	color: blue;

}

.box
{
	margin: 10px;
}

.clear
{
	clear: both;
}


</style>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">

</BODY>
<div id="box0" class="box">
</div>
<div id="containElement">

	<div id="box1" class="box">
	Box1
	</div>

		<div id="box2" class="box">
		<p> Box2  yes i am inside box2, no doubt about it </p>
		</div>

	<div id="box3" class="box">
	Box3</ br>
	original 100x100</ br>
	no pad
	</div>

<div class="clear">
</div>

</div>

<p>
	ipsum lorem abra cadabra pata de cabra ipsum lorem abra cadabra pata de cabra ipsum lorem abra cadabra pata de cabra
</p>
</HTML>
2

Non-floated content flows around floated content. Yes, the non-floated box 2 sits over the top of box 1, but its content isn’t allowed to sit over it. The content is looking for the next available space beside or below box 1. Even though box 2 has the same dimensions as box one, the content of box 2 is still forced to find somewhere else to reside, so spills out of box 2 and sits below.

If you want to place content of one box over another box, you are better off trying something like position: absolute.

3

thank you, you have answered my question, and made me see there’s more
to floats.

|box1(floated) | box2(not floated)|

i did not ‘want’ to put the content of top of another box. what i ‘wanted’ to do
was understand one of the very basic principles of floats. That supposedly they
go out of flow, and everything else behaves as if they were not there. i no longer
think this is the case.

Having read your response, seems there is more to floats- For example
“content isn’t allowed to sit over a float”

I was just reading the book “css mastery” (andy budd), and on page 37 it talks
about floats:
“because floated boxes arent in the normal flow, block boxes in the normal flow
behave as if the floated box wasn’t there.”

It then showed an illustration with this caption:
“When you float box1 to the left, it is taken out of the flow of the doc. . .
Because it is no longer in the flow, it takes up no space and actually sits
on top of box2, obscuring it from view”

i took all this info and digested it until i was sure i understood it.

then i decided to make an example

wrapper
box1, with content ‘box1’
box2, with content ‘box2’

i floated box1 to the left
left box2 not floated

the 2 boxes did sit on top of each other, but the content of box2 jumped outside the div borders!

i was just totally shocked by this behavior, because the book did not mention that
this would happen.

so there’s more i need to find out

thanks again

4

I don’t like the way they say other content doesn’t see a floated item, because it’s not true. Non-floated items do fill up the space of floated items, sitting beneath them, BUT the content of the non-floated items flows around the floated item. So really the float is not totally ignored by the non-floated elements.

A classic scenario is a block of text with an image floated inside it. The text wraps around the image, so you can’t really say the non-floated content ignores the float altogether.