[thelist] aligning boxes flush

sten lists at redboy.cx
Sat Jun 21 17:10:11 CDT 2003


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?


More information about the thelist mailing list