CSS Box / Float Question

Jim Correia Fri, 01 Jun 2001 10:24:06 -0700
The HTML in question is below.

I'm getting weird results.

The first "problem" is that when using floating boxes, it seems that the
margins can overlap and things but up against each other at the passing
level.  

I don't know if this is consistent with
<http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins> or not.

The second problem is that the MenuInner has a 1em padding.  Its dashed
border ends up being outside of its parent div.  Bug in IE, or am I
misunderstanding something?

Thanks,
Jim



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd";>
<html>
<head>
    <title>Float Test</title>
    <style type="text/css">
        #Content {
            float: right;
            width: 80%;
            border: solid 1px black;
        }

        #ContentInner {
            padding: 1em;
            border: dashed red 1px;
        }

        #Menu {
            width: 20%;
            border: solid 1px black;
        }
            
        #MenuInner {
            padding: 1em;
            border: dashed red 1px;
        }
    </style>
</head>
<body>

<div id="Content">
<div id="ContentInner">
    <h1>Some Text</h1>
    <p>
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
    </p>
    <p>
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
    </p>
    <p>
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
    </p>
    <p>
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
        Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
yadda.
    </p>
</div>
</div>

<div id="Menu">
<div id="MenuInner">
    <a href="" title="">Fake Link One</a><br>
    <a href="" title="">Nothing Here</a><br>
    <a href="" title="">Links Nowhere</a><br>
    <a href="" title="">Fake Link Four</a><br>
    <a href="" title="">Fifth Fake Link</a><br>
</div>
</div>


</body>
</html>

-- 
Jim Correia                                Bare Bones Software, Inc.
[EMAIL PROTECTED]                     <http://web.barebones.com>

To unsubscribe send mail to [EMAIL PROTECTED]
To search the archives: 
          <http://www.mail-archive.com/macie-talk%40lists.boingo.com/>
CSS Box / Float Question

Reply via email to
