Re: css problem (float)

On Sep 6, 3:43 am, Ben C <spams...@xxxxxxxxx> wrote:
On 2007-09-05, Deephay <tudo...@xxxxxxxxx> wrote:

On Sep 5, 5:23 pm, Ben C <spams...@xxxxxxxxx> 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>

Hi Ben,

Thanks, I thought the initial value of overflow is not visible, but it
is. It is now matches my need (at least in Firefox).

Another thing:
I think Firefox does not handle CSS correctly, if you add a "width:
100%;" for the middle column, the
middle column will overlap with the right float, which is not correct
for that case since "overflow: hidden"
makes the middle column established a new block formatting context.

Cheers.

.

Relevant Pages

  • Re: css problem (float)
    ... element in the normal flow that establishes a new block formatting ... not overlap any floats in the same block formatting context as the ... cells, positioned things, things with overflow other than visible. ... block formatting context narrower when there are floats in the way". ...
    (alt.html)
  • Re: CSS liquid layout - cant achieve correct sizing
    ... It is a bit of a weird side-effect of overflow: ... dorayme has a webpage about containment of descendent floats with some ... It establishes a new block formatting context. ...
    (alt.html)
  • Re: Fraction>>asFloat (FloatingPoint Overflow)
    ... /3)asFloat should raise an overflow, ... (i mean it likely won't be the closest float to the fraction) ... newN:= numerator. ... newD:= denominator. ...
    (comp.lang.smalltalk.dolphin)
  • Re: IE6 overflow problem
    ... the paragraph element growing height to enclose the floated image. ... overflow does not work with IE6 to address the problem. ... But this will not work in your case because you have the float within ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: div/bg color issue.. ok, heres the deal....;)
    ... Background images with repeat-y pretending to be column backgrounds. ... Point is, the longer column is the float, ... leaving the right column div ... Because the container is overflow: hidden, it grows to the height of the ...
    (comp.infosystems.www.authoring.stylesheets)