[thelist] aligning boxes flush

Pierre Lemieux plemieux at neomedia.com
Sun Jun 22 07:58:07 CDT 2003


Try using a wrapper DIV to position your global context and position box1
and box2 relative to it. This way, you can right align box1.

The following code works in Mozilla 1.3 (OSX) and IE6win and should work in
other standard browsers. Using percentage for box1 height and box2 top lead
to unpredictable results. If your layout allows it, use fixed values like px
instead of percentage.

And don't forget percentage value are relative to the containing block, so
box1 width is 12% of the wrapper width.


<div id="wrapper">
    <div id="box1">box 1</div>
    <div id="box2">box 2</div>
</div>


    #wrapper{
        position: absolute;
        top: 15%;
        left: 3%;
        width: 65%;
        border: 1px red solid;
    }
    #box1{
        width: 12%;
        height: 30px;
        position: absolute;
        right: 0;
        font-size: 12pt;
        text-align: center;
        background-color: #000;
        color: #fff;
    }
    #box2{
        position: relative;
        top: 30px;
        background-color: #000;
    }

Hode this help.

Pierre



More information about the thelist mailing list