[thelist] aligning boxes flush

Alexander C. Garcia Alexander at Garcia.Name
Sun Jun 22 16:01:22 CDT 2003


Sten

  I've come to notice that with IE if you don't specify display: block it
won't work. Similarly other browsers require different rule sets like
position :relative etc. I didn't test your code with the display: block, but
try it out and see if it works on IE.

Peace be with you.

Alexander Garcia
Alexander at Garcia.Name

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org]On Behalf Of sten
Sent: Saturday, June 21, 2003 6:10 PM
To: thelist at lists.evolt.org
Subject: [thelist] aligning boxes flush

Hi,

I'm trying to align to div's so that the bottom of one is flush the th top
of the other. ASCII art example:
       ___________
       | box1    |
-------          |
|     box2       |
------------------

I've been trying to use absolute positioning and percentages to lign the
boxes up:

#box1 {
        position: absolute;
        top: 15%;
        left: 56%;
        height: 5%;
        width: 12%;
        border: 1px solid #ffffff;
        color: #ffffff;
        text-align: center;
        background-color: #000000;
        font-size: 12pt;
        z-index: 1;
}
#box2 {
        position: absolute;
        top: 20%;
        left: 3%;
        min-height: 70%;
        width: 65%;
        border: 1px solid #ffffff;
        background-color: #000000;
        overflow: hidden;
}

This works in Mozilla, but not in IE. Also, text, especially if I change
the font size in the boxes, seems to throw the alignment off.

There's gotta be a better way to do this. Suggestions?

-sten
--
* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

Evolt.org conference in London, July 25-27 2003.  Register today at
http://evolt.org.uk

For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !



More information about the thelist mailing list