|
|
Posted by Ben C on 09/05/07 19:43
On 2007-09-05, Deephay <tudoxxx@gmail.com> wrote:
> On Sep 5, 5:23 pm, Ben C <spams...@spam.eggs> wrote:
[...]
> I feel CSS behaves oddly in Firefox, according to CSS spec:
>
> "The border box of a table, a block-level replaced element, or an
> element in the normal flow that establishes a new block formatting
> context (such as an element with 'overflow' other than 'visible') must
> not overlap any floats in the same block formatting context as the
> element itself."
>
> But why does the middle column actually overlapped with them?
Because it doesn't establish a new block formatting context, it's just a
normal block-level element.
Only some block boxes start "block formatting contexts"-- floats, table
cells, positioned things, things with overflow other than visible.
You could actually use this to solve your problem, and I almost
suggested it the first time.
Note that this particular thing has only very recently been tightened up
in the CSS 2.1 spec. It used to say something like "browsers may make
block formatting context narrower when there are floats in the way".
Now it says "must" and is altogether clearer about the whole thing.
Try this, then try commenting out overflow: hidden and reloading:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div
{
border: 2px solid black;
}
.left
{
float: left;
background-color: pink;
width: 25%;
height: 300px;
}
.right
{
float: right;
background-color: palegreen;
width: 25%;
height: 300px;
}
.middle
{
overflow: hidden;
background-color: blue;
height: 400px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
</html>
[Back to original message]
|