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>
<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>
<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
/*************************/
