254
hello guys,
I am just unable to make a simple 2 Box model layout layout work perfect on the browsers IE and ffx. My resulting webpage responds variably on either of them..
The problem is that but the IE shows a margin of 20px and ffx shows a margin of 10px from right..
the main box is container containing another box right. and the code for the same is here
[html]
<!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>
<style type="text/css" >
.container{
background:url(./ask/img/bg_grad.gif);
background-repeat:repeat-y;
border:1px solid #e0e0e0;
padding:0px;
margin:0px 100px 0px 100px;
width:825px;
border:1px solid red;
height:1000px;
}
.right{
float:right;
background:#ffffff url('./ask/img/content.gif') no-repeat top right;
border-left:2px solid #e0e0e0;
width:190px;
border:1px solid red;
margin:0px 10px 10px 0px;
padding:30px 10px 10px 10px;
height:2000px;
}
</style>
</head>
<body>
<div class='container'>
<div class='right'></div>
</div>
</body></html>[/html]
I have given the heights here just to see the elements .. but in actual page i am using JS to make the heights equal..
