|
|
Posted by Ben C on 08/30/07 14:45
On 2007-08-30, Froefel <hansdeschryver@gmail.com> wrote:
> For once, IE seems to do what I intend, but Firefox doesn't. Can
> anyone help make the result in FireFox look exactly like the one in
> IE?
It's no good saying "make it look like IE" or people who don't have IE,
like me, don't know what you mean.
In this case I can perhaps guess though. You've got a right float with
auto width containing a left float and a right float.
They key box here is Level1_right. How wide should it be? It's a float
with width: auto so its width should be the "shrink-to-fit width", which
is a function of its contents. In this case its contents consist of more
floats, and that's the thing Firefox interprets differently from some
other browsers.
This is what CSS 2.1 10.5 says about shrink-to-fit width:
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, find the available width: [...] Then the shrink-to-fit width
is: min(max(preferred minimum width, available width), preferred
width).
This tells us roughly how to calculate shrink-to-fit width as a function
of the text in a container. But what about the floats in a container?
CSS 2.1 does not define the exact algorithm for that either...
Opera and Konqueror use the maximum of the width of Level2_bottom and
the sum of the widths of Level2_left and Level2_right as the preferred
width of Level1_right's contents. Since Level2_bottom is wider than that
sum in practice, Level2_bottom's width is the preferred width of
Level1_right.
Firefox on the other hand reckons that since Level2_left and
Level2_right are a left and a right float, they would "prefer" to be as
far apart as possible, and so apparently uses a preferred width of
infinity. Level1_right's shrink-to-fit width therefore works out as the
full available width.
How to make Firefox do what you want? With a slight compromise, you
could just set an explicit width of about 20em on Level1_right. To get
exactly the behaviour of Opera or Konqueror here, where Level1_right
shrinks to fit max(Level2_bottom width, Level2_left width + Level2_right
width), I can't think of a way without resorting to a table.
> Here's the code:
>
><div id="Level1_left" style="float:left; background-color:gray;">
> <table id="Level1_table" style="border:2px solid red">
> <tr>
> <td>1, 1</td>
> <td>1, 2</td>
> </tr>
> <tr>
> <td>2, 1</td>
> <td>2, 2</td>
> </tr>
> </table>
></div>
>
><div id="Level1_right" style="float:right; background-
> color:lightgrey;">
> <div id="Level2_left" style="float:left; border:2px solid yellow;">
> Personalized Email
> </div>
>
> <div id="Level2_right" style="float:right; border:2px solid yellow">
> Links go here
> </div>
>
> <div id="Level2_bottom" style="clear:both; border:2px solid green">
> This goes underneath both Level2 panels
> </div>
></div>
>
Navigation:
[Reply to this message]
|