|
|
Posted by Jim Moe on 03/24/06 07:44
Guybrush Threepwood wrote:
>>>
>>> <div id="container">
>>> <div id="left"></div>
>>> <div id="mid"></div>
>>> <div id="right"></div>
>>> </div>
>> The sequence is incorrect. Place "right" after "left", then "mld".
> I have to admit I don't understand the logic of this. Could you explain?
>
"float" is a generalization of <img>'s align attribute. When an object
is floated, it "floats" up left or right within the limits of the
containing object. Inline content flows around floated objects. Floated
content is "shrinkwrapped" by its container.
As you saw, when "mid" is second, "right" floats to the bottom of "mid",
the only place "right" can float since "mid" takes up all the horizontal
space.
By ordering the divs as suggested, "left" can float up to the left of
"container," "right" can float up to the right, and "mid" content flows
around them to fill the space. "mid" itself is actually overlaid by the
floated objects. If you add a border (or a background color or image) to
"mid," it would seem to disappear under the floats.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Navigation:
[Reply to this message]
|