[thelist] aligning boxes flush
Murphy, William
murphy at litio.net
Sun Jun 22 11:10:51 CDT 2003
Why dont you try right: 10% (or whatever you like) instead of the left
propery in both of them.
#box1 {
position: absolute;
top: 15%;
right: 10%;
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%;
right: 10%;
min-height: 70%;
width: 65%;
border: 1px solid #ffffff;
background-color: #000000;
overflow: hidden;
}
By the way, i'm working on it, and it's in spanish, but i accept coments and
sugestions on my site http://litio.net .
----- Original Message -----
From: "sten" <lists at redboy.cx>
To: <thelist at lists.evolt.org>
Sent: Sunday, June 22, 2003 12:10 AM
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