|
Michael:
Simple but not perfect:
if you can live with a 3px margin different in
different browsers:
#right {
width:197px; /* if I put a unit
here such as "px" then the column doesn't line up
*/
margin-left:400px;
}
IE renders a 3px margin on adjacent divs in certain
circunstances.
This will take that out; in other browsers, if you
have different backgrounds for each div this solution isn't
suitable.
If you can make it a float:
#right {
width:200px; /* if I put a unit
here such as "px" then the column doesn't line up
*/
float:right;
}
More complex ones need some testing.
They involve getting rid of the IE margin without
affecting other browsers, or using negative margins IE only.
You could try taking a look at some good tips
in:
Well, 06:00h, I'm crashing...
Isabel Santos
----- Original Message -----
Sent: Friday, October 01, 2004 5:11
AM
Subject: [WSG] IE & weird display
problem
I'm
working on a page that will consist of 2 columns that will sit inside a
wrapper div container. I set the left column to float left with a width of
400px. The right column is set with a margin-left of 400px and a width of
200px. The width of the wrapper container is 600px. The right column is
getting pushed down in IE6+. If I remove the px from the width of the right
column so the style reads simply width:200; then the right column lines up
correctly with the left column. I've never heard of this before and it makes
no sense to me. You can see my code below with the problem in
bold.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled
Document</title>
<style type="text/css" media="screen">
body
{
padding:0;
margin:0;
}
#wrapper
{
width:600px;
margin:10px auto;
}
#left
{
float:left;
width:400px;
}
#right
{
width:200; /* if I put a unit here such
as "px" then the column doesn't line up
*/
margin-left:400px;
}
</style>
</head>
<body>
<div id="wrapper">
<div
id="left">
left side
text
</div>
<div
id="right">
right side
text
</div>
</div>
</body>
</html>
Thanks for
you help.
/*************************/
[ Michael Turnwall
]
weblog | resume
/*************************/
| 